Nesting pseudo-elements inside pseudo-elements
css, pseudo-element
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.
Problem
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; } ```