在伪元素内嵌套伪元素

问题描述 投票：0回答：3

我有一个 :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;
}
<blockquote cite="http://www.worldwildlife.org/who/index.html">
  For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

css pseudo-element
3个回答
58
投票

提出了嵌套

::before
和
::after
伪元素的思想；请参阅生成和替换内容模块的本节。然而，该模块已被放弃等待完全重写，因此在重新发布之前，我不会对这份文档的实现抱有任何期待。即便如此，嵌套内容伪元素是否仍然是一个问题仍然未知。

1
投票

关于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;
}
<blockquote cite='Person'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore accusamus ipsum cumque culpa natus magnam earum, inventore iure et harum.</blockquote>

但根据标准，引用必须是 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>


我知道已经为有关嵌套伪元素的信息提高了赏金。只是想解决原帖中的问题。

1
投票

W3C 推荐标准 非常明确地反对嵌套伪元素：

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

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

然而，有趣的是，Jigsaw 验证器确实接受以下 CSS 代码：

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

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

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.