CODEWITHSUNDEEP
css
RegEdit
RegEdit

Reputation: 2162

CSS: Generated content applied to blockquote only gets applied to first instance?

This CSS creates a nice effect when applied against a single blockquote within the content its attached to.

However, when there is more than one blockquote, everything works except the generated content.

In other words, the quote symbol is only applied to the first instance of the blockquote.

blockquote{
    border:1px solid #ccc;
    border-width:1px 0;
    margin:20px 0;
    padding: 2px 10px;
    padding-left:50px;
    font-style:italic;
    font-size:1.2em;
    font-weight:bold;
    quotes:'\201C';
    clear:both;
}
blockquote:before{
    content:open-quote;
    font-size:5em;
    position:absolute;
    color:#ccc;
    margin:0 0 0 -45px;
    font-family:georgia,serif;
    font-style:normal;
    font-weight:normal
}

Update: Thanks to Alex Morales, the issue is resolved by adding:

blockquote:after{content:close-quote;position:absolute;visibility:hidden;}

Upvotes: 1

Views: 351

Answers (2)

Alex Morales
Alex Morales

Reputation: 1191

You need to apply the close-quote for the :after pseudo-element. This should take care of your issue.

Here's some sample code:

blockquote:after{
content:close-quote;
font-weight:bold;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}

Upvotes: 1

MMM
MMM

Reputation: 7310

Change your first statement to:

blockquote {
    border:1px solid #ccc;
    border-width:1px 0;
    margin:20px 0;
    padding: 2px 10px;
    padding-left:50px;
    font-style:italic;
    font-size:1.2em;
    font-weight:bold;
    quotes:'\201C''\201C';
}

See jsFiddle demo

Upvotes: 2

Related Questions