CSS: blockquote box with quotemarks

Categories: code

css blockquote quotemarks
css blockquote quotemarks

<htmL>
<body style=”background-color:#c7b8a0C3;”>
<blockquote class=”cblockquote”>
Brutus, quia reges eiecit, consul primus factus est;
<br> Hic, quia consules eiecit, rex postremo factus est.
</blockquote>
</body>
</html>

To do: change colours to RGBA. Adjust spacing & padding.

blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: “\201C” “\201D” “\2018” “\2019”;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}

blockquote:after {
color: #ccc;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
]

«