Nesting pseudo-elements inside pseudo-elements

css pseudo-element
David O'Sullivan picture David O'Sullivan · Jan 25, 2012 · Viewed 16.5k times · Source

I have a :before for an opening 'quote' and an :after for a closing quote.

Now what I want is an :after:after for the 'cite' reference but I cant get it to work.

Does anyone know if this is possible?

My code so far:-

blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }

blockquote {
  font-size: 22px;
  line-height: 24px;
  text-indent:60px;
}
blockquote:before {
  font-size: 170px;
  margin-left: -136px;
  margin-top: 50px;
  opacity: 0.2;
  position: absolute;
  overflow:visible;
  float:left;
  width:135px;
}
blockquote:after {
  float: right;
  font-size: 170px;
  margin-right: 35px;
  margin-top: 33px;
  opacity: 0.2;
  overflow:visible;
  width:135px;
}
blockquote[cite]:after:after {
    display: block;
    text-align: right;
    content: "\2014\ " attr(cite);
    font-style: normal;
    font-size: 0.8em;
    }

Answer

BoltClock picture BoltClock · Jan 25, 2012

The idea of nesting ::before and ::after pseudo-elements has been proposed; see this section of the Generated and Replaced Content module. However, that module has been abandoned pending a complete rewrite, so I wouldn't hold my breath on this document ever receiving implementation until it's republished. And even then, whether nesting content pseudo-elements will still be a thing is as yet unknown.

Related questions

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery? For example, my stylesheet has the following rule: .span::after{ content:'foo' } How can I change 'foo' …

Read More
CSS :not(:last-child):after selector

I have a list of elements, which are styled like this: Outputs One | Two | Three | Four | Five | instead of One | Two | Three | Four | Five Anyone know how to CSS select all but the last element? You can see the definition …

Read More
Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .…

Read More