CODEWITHSUNDEEP
htmlcss
Fernando Freitas Alves
Fernando Freitas Alves

Reputation: 3777

Blockquotes duplicating quotes on span tags

I have this css aplied to my page:

blockquote ::before {
  content: "“";
}

blockquote ::after {
  content: "”";
}

It is used to put blockquote between quotes, however when I am using a blockquote with a span tag inside I got duplicated quotes. (All the html is generated by a wysiwyg editor)

enter image description here

Image html:

<blockquote>
<p>blockquote</p>
</blockquote>

<p>&nbsp;</p>

<blockquote>
<h1>blockquote</h1>
</blockquote>

<p>&nbsp;</p>

<blockquote>
<p><span style="font-size:20px;">blockquote</span></p>
</blockquote>

Why is that happening?

Upvotes: 1

Views: 702

Answers (2)

Quentin
Quentin

Reputation: 943562

blockquote ::before

          ^

You have a space there. This is a descendant combinator.

You aren't putting quotes before and after the blockquote, you are putting them before and after every element inside it (i.e. the paragraphs and the spans).

Remove the space: blockquote::before and blockquote::after.

Upvotes: 1

Oriol
Oriol

Reputation: 288120

Try

blockquote::before {
  content: "“";
}
blockquote::after {
  content: "”";
}

If you use a space, the selectors match ::before and ::after of all descendants of blockquote.

Without space, the rules will only match ::before and ::after of blockquote, so you won't have duplicate quotes, and it will work even if there is no descendant.

Upvotes: 3

Related Questions