Search code examples
csspseudo-element

Nesting pseudo-elements inside pseudo-elements

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;
}
<blockquote cite="http://www.worldwildlife.org/who/index.html">
  For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

Solution

  • 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.