在伪元素中嵌套伪元素答案

【问题标题】：Nesting pseudo-elements inside pseudo-elements在伪元素中嵌套伪元素
【发布时间】：2012-02-18 22:08:12
【问题描述】：

我有一个 :before 用于开头的“引号”和一个 :after 用于结束引号。

现在我想要一个 :after:after 用于“引用”参考，但我无法让它工作。

有人知道这是否可行吗？

到目前为止我的代码：-

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

【问题讨论】：

另见developer.mozilla.org/en-US/docs/Web/CSS/element，但目前仅受 Firefox 支持。
是否有任何更新信息？
@JasonC - 恐怕没什么用。废弃的 2003 年草案中描述的功能的责任在 CSS Generated Content Module 规范和 CSS Pseudo-Elements 规范之间划分。对于伪元素定义，这是后一个规范。但它表明没有比我们自 CSS2 以来更复杂的 ::before 和 ::after 框生成的趋势。
@Alohci Sigh... 嗯嗯。谢谢。

标签： css pseudo-element

【解决方案1】：

The W3C Recommendation 显然反对嵌套伪元素：

每个选择器只能出现一个伪元素，如果出现，它必须出现在代表选择器主题的简单选择器序列之后。

注意：本规范的未来版本可能允许每个选择器有多个伪元素。

不过有趣的是，Jigsaw validator确实接受以下 CSS 代码：

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

我不确定这是否只是侥幸。

【讨论】：

这很可能是侥幸，因为 Jigsaw 验证器有问题。

【解决方案2】：

关于 OP 问题的内容，即在块引用之后创建生成的内容，以包括引用和关闭引用。
我们可以在伪元素的内容中使用图片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;
}

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

但根据standards 引用需要是一个 URL：

如果 cite 属性存在，它必须是一个可能被空格包围的有效 URL。要获得相应的引用链接，必须相对于元素的节点文档解析属性的值。用户代理可能允许用户关注此类引用链接，但它们主要用于私人用途（例如，通过服务器端脚本收集有关网站使用引用的统计信息），而不是供读者使用。

引用的属性（如果有）必须放在 blockquote 元素之外。

以上代码可以按照标准重写：

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>

我知道已为有关嵌套伪元素的信息提出了赏金。只是试图解决原始帖子中的问题。

【讨论】：

【解决方案3】：

提出了嵌套::before和::after伪元素的思路；请参阅生成和替换内容模块的this section。但是，该模块已被废弃pending a complete rewrite，因此在重新发布之前，我不会对这个文档一直接收实现感到屏息。即便如此，嵌套内容伪元素是否仍会成为一件事仍是未知数。

【讨论】：

@Zeaklous：不，这个特定的文档可以被视为放弃，因为它正在等待完全重写 - 请参阅w3.org/Style/CSS/current-work.en.html
是否有任何更新信息？
@Jason C：现在正在对 CSS Content level 3 模块进行重写，但嵌套功能不是其中的一部分。如上所述，它也不在伪元素规范中。可以安全地假设此功能已失效。