Menu
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; } 
843
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.
There are no special rules around combining pseudo-classes and pseudo-elements, besides the one rule that says there can only be one pseudo-element per complex selector and it must appear at the very end.
1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
Adding multiple pseudo elementsYou can combine several CSS pseudo-elements for one element. However, you cannot use CSS ::after two times or ::before two times. In the example below, the first letter of <div> is green and has x-large font size. The first line of <div> element is red and has small capital letters.
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.
116
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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
