title: Nesting pseudo-elements inside pseudo-elements
body: <p>I have a :before for an opening 'quote' and an :after for a closing quote.</p>
  
  <p>Now what I want is an :after:after for the 'cite' reference but I cant get it to work.</p>
  
  <p>Does anyone know if this is possible?</p>
  
  <p>My code so far:-</p>
  
  <pre><code>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;
      }
  </code></pre>