Add Quotation marks to :before and :after elements

Question

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: "&ldquo;";
    position: absolute;
    width: 15%;
    height: 1px;
    bottom: 30px;
    left: 42%;
}

Check out this article for more about the cool things you can do with :before and :after content - https://css-tricks.com/css-content/ — dogwoodtree-dot-net, Jun 23 '16 at 20:21
Are you sure? `content: '"';` works fine in the [demo](https://jsfiddle.net/j3c4pv7k/). — Stickers, Jun 23 '16 at 20:43

score 8 · Accepted Answer · answered Jun 23 '16 at 20:16

8

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

content: "\0022";

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

answered Jun 23 '16 at 20:16

MattDiMu

4,873
1
19
29

Works! Thanks man :) – Devon Jun 23 '16 at 20:21
@Zaeo feel free to mark it as answer plz :) – MattDiMu Jun 23 '16 at 20:21
Had a limit for me to accept as answer, was too new a question :) – Devon Jun 23 '16 at 20:29
that's not the same quotation mark as ldquo – user151496 Jun 20 '22 at 10:30

score 2 · Answer 2 · answered Jun 23 '16 at 20:20

2

You can just escape the quotation mark:

.review-wrapper h2:before {
    content: "\""
}

JSFiddle: https://jsfiddle.net/g7eyq5zg/

answered Jun 23 '16 at 20:20

Arijoon

2,184
3
24
32

Add Quotation marks to :before and :after elements

2 Answers2