Zaeo Zaeo - 5 months ago 19
HTML Question

Add Quotation marks to :before and :after elements

I've tried adding

"
to the
content: ""
to achieve quotations. This resulted in the css being ignored. I've tried wrapping the " in single quotes,
content: '"'
Same result. CSS is ignored

I've tried
content: "“"
but the letters are rendered.

How can I render Quotation marks in :before and :after CSS pseudo elements? I would prefer not to use
background-image: url('http://url.com')
so that I can use font size to scale the quotation marks, and users can copy the quotes.

.review-wrapper h2:before {
content: "“";
position: absolute;
width: 15%;
height: 1px;
bottom: 30px;
left: 42%;
}

Answer

You need to unicode-escape the content property like this:

content: "\0022";

http://codepen.io/MattDiMu/pen/jryOQj