Nesting pseudo-elements inside pseudo-elements

Question

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;
    }

see also https://developer.mozilla.org/en-US/docs/Web/CSS/element, but currently only supported by Firefox. — mb21, Aug 19 '18 at 09:19
@JasonC - Nothing useful, I'm afraid. The responsibility for the features described in the abandoned 2003 draft got split between the CSS Generated Content Module spec and the CSS Pseudo-Elements spec. For pseudo element definitions, that's the latter spec. But it indicates no move towards more complex ::before and ::after box generations than what we've had since CSS2. — Alohci, Dec 08 '21 at 22:30
@Alohci [Sigh...](https://i.giphy.com/media/33iqmp5ATXT5m/giphy.webp) ah well. Thanks. — Jason C, Dec 08 '21 at 23:03

BoltClock · Accepted Answer · 2013-10-23T07:31:55.653

56

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.

edited Oct 23 '13 at 07:31

answered Jan 25 '12 at 17:56

BoltClock

700,868
160
1,392
1,356

5

@Zeaklous: No, this particular document can be considered abandoned as it's pending a complete rewrite - see http://www.w3.org/Style/CSS/current-work.en.html – BoltClock Oct 23 '13 at 07:29
Is there any updated info about this? – Jason C Dec 08 '21 at 21:46
@Jason C: Rewriting is ongoing for the CSS Content level 3 module now, but the nesting feature isn't part of it. As mentioned above, it's not in the Pseudo-Elements spec either. It's safe to assume this feature is dead. – BoltClock Dec 23 '21 at 18:25

score 1 · Answer 2 · answered Dec 09 '21 at 04:22

Regarding the content of the OP question i.e. creating generated content after blockquote to include citation along with close-quote.
We can use image in pseudo element's content ref:

content: url("data:image/svg+xml,<svg>...close-quote...</svg>") " \2014 "attr(cite);

blockquote {
  font-size: 22px;
  line-height: 24px;
  text-indent: 10px;
  position: relative;
}

blockquote:before {
  content: url("data:image/svg+xml, %3Csvg preserveAspectRatio='none' version='2.0' xmlns='http://www.w3.org/2000/svg' hei ='45px' width='25px' viewBox='0 0 191.029 191.029' x='0px' y='0px' %3E%3Cg transform='translate(0 -10) scale(0.8) '%3E%3E%3Cpath style='fill:%23777;' d='M44.33,88.474v15.377h38.417v82.745H0v-82.745h0.002V88.474c0-31.225,8.984-54.411,26.704-68.918%0AC38.964,9.521,54.48,4.433,72.824,4.433v44.326C62.866,48.759,44.33,48.759,44.33,88.474z M181.107,48.759V4.433%0Ac-18.343,0-33.859,5.088-46.117,15.123c-17.72,14.507-26.705,37.694-26.705,68.918v15.377h0v82.745h82.744v-82.745h-38.417V88.474%0AC152.613,48.759,171.149,48.759,181.107,48.759z' /%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
  padding-right: 10px;
}

blockquote[cite]:after {
  content: url("data:image/svg+xml,%3Csvg version='2.9' xmlns='http://www.w3.org/2000/svg' hei ='35px' width='25px' x='0px' y='0px' viewBox='0 0 349.078 349.078' preserveAspectRatio='none'%3E%3Cg transform='translate(0 90) scale(0.8) '%3E%3E%3Cpath style='fill:%23777;' d='M198.779,322.441v-58.245c0-7.903,6.406-14.304,14.304-14.304c28.183,0,43.515-28.904,45.643-85.961h-45.643 c-7.897,0-14.304-6.41-14.304-14.304V26.64c0-7.9,6.406-14.301,14.304-14.301h121.69c7.896,0,14.305,6.408,14.305,14.301v122.988 c0,27.349-2.761,52.446-8.181,74.611c-5.568,22.722-14.115,42.587-25.398,59.049c-11.604,16.917-26.132,30.192-43.155,39.437 c-17.152,9.304-37.09,14.026-59.267,14.026C205.186,336.745,198.779,330.338,198.779,322.441z M14.301,249.887 C6.404,249.887,0,256.293,0,264.185v58.257c0,7.896,6.404,14.298,14.301,14.298c22.166,0,42.114-4.723,59.255-14.026 c17.032-9.244,31.558-22.508,43.161-39.437c11.29-16.462,19.836-36.328,25.404-59.061c5.423-22.165,8.178-47.263,8.178-74.6V26.628 c0-7.9-6.41-14.301-14.304-14.301H14.301C6.404,12.327,0,18.734,0,26.628v122.988c0,7.899,6.404,14.304,14.301,14.304h45.002 C57.201,220.982,42.09,249.887,14.301,249.887z'/%3E%3C/g%3E%3C/svg%3E") " \2014 "attr(cite);
  font-size: 0.8em;
  position: relative;
  top: 10px;
  opacity: 0.5;
  padding-left: 10px;
}

<blockquote cite='Person'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore accusamus ipsum cumque culpa natus magnam earum, inventore iure et harum.</blockquote>

But as per standards citation needs to be an URL:

If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be parsed relative to the element's node document. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site's use of quotations), not for readers.

Attribution for the quotation, if any, must be placed outside the blockquote element.

Above code can be rewritten as per standard:

blockquote {
  font-size: 22px;
  line-height: 24px;
  text-indent: 10px;
  position: relative;
  background: #eee;
  border-radius: 10px;
  padding: 10px;
}

blockquote:before {
  content: url("data:image/svg+xml, %3Csvg preserveAspectRatio='none' version='2.0' xmlns='http://www.w3.org/2000/svg' hei ='45px' width='25px' viewBox='0 0 191.029 191.029' x='0px' y='0px' %3E%3Cg transform='translate(0 -10) scale(0.8) '%3E%3E%3Cpath style='fill:%23777;' d='M44.33,88.474v15.377h38.417v82.745H0v-82.745h0.002V88.474c0-31.225,8.984-54.411,26.704-68.918%0AC38.964,9.521,54.48,4.433,72.824,4.433v44.326C62.866,48.759,44.33,48.759,44.33,88.474z M181.107,48.759V4.433%0Ac-18.343,0-33.859,5.088-46.117,15.123c-17.72,14.507-26.705,37.694-26.705,68.918v15.377h0v82.745h82.744v-82.745h-38.417V88.474%0AC152.613,48.759,171.149,48.759,181.107,48.759z' /%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
  padding-right: 10px;
}

blockquote[cite]:after {
  content: url("data:image/svg+xml,%3Csvg version='2.9' xmlns='http://www.w3.org/2000/svg' hei ='35px' width='25px' x='0px' y='0px' viewBox='0 0 349.078 349.078' preserveAspectRatio='none'%3E%3Cg transform='translate(0 90) scale(0.8) '%3E%3E%3Cpath style='fill:%23777;' d='M198.779,322.441v-58.245c0-7.903,6.406-14.304,14.304-14.304c28.183,0,43.515-28.904,45.643-85.961h-45.643 c-7.897,0-14.304-6.41-14.304-14.304V26.64c0-7.9,6.406-14.301,14.304-14.301h121.69c7.896,0,14.305,6.408,14.305,14.301v122.988 c0,27.349-2.761,52.446-8.181,74.611c-5.568,22.722-14.115,42.587-25.398,59.049c-11.604,16.917-26.132,30.192-43.155,39.437 c-17.152,9.304-37.09,14.026-59.267,14.026C205.186,336.745,198.779,330.338,198.779,322.441z M14.301,249.887 C6.404,249.887,0,256.293,0,264.185v58.257c0,7.896,6.404,14.298,14.301,14.298c22.166,0,42.114-4.723,59.255-14.026 c17.032-9.244,31.558-22.508,43.161-39.437c11.29-16.462,19.836-36.328,25.404-59.061c5.423-22.165,8.178-47.263,8.178-74.6V26.628 c0-7.9-6.41-14.301-14.304-14.301H14.301C6.404,12.327,0,18.734,0,26.628v122.988c0,7.899,6.404,14.304,14.301,14.304h45.002 C57.201,220.982,42.09,249.887,14.301,249.887z'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  top: 10px;
  opacity: 0.5;
  padding-left: 10px;
}

blockquote + figcaption{
  float:right;
}

<figure>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore accusamus ipsum cumque culpa natus magnam earum, inventore iure et harum.
  </blockquote>
  <figcaption>—Person, <cite>Book</cite></figcaption>
</figure>

I know the bounty has been raised for info about nesting pseudo elements. Just trying to address the question in the original post.

score 1 · Answer 3 · answered Dec 15 '21 at 13:49

The W3C Recommendation is quite clearly against nesting pseudo-elements:

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

Note: A future version of this specification may allow multiple pseudo-elements per selector.

However and interestingly enough, the Jigsaw validator does accept the following CSS code:

p::before { content: "test1"; }
p::before::before { content: "test2"; }

I’m not sure if that’s nothing but fluke.

It's most probably a fluke because the Jigsaw validator is buggy. — BoltClock, Dec 23 '21 at 18:26

Nesting pseudo-elements inside pseudo-elements

3 Answers3

Linked

Related