CSS :after 可以包含这个元素的内容吗？答案

【问题标题】：Can CSS :after contain content of this element?CSS :after 可以包含这个元素的内容吗？
【发布时间】：2012-10-19 07:17:29
【问题描述】：

快速简单的问题。假设我有这个链接：<a href="">abc</a>

我可以将abc 用作content 的a:after { content: ???; } 吗？我不想创建额外的data-myattr。

W3 是这样说的：

attr(X) 此函数将属性 X 的值作为字符串返回选择器的主题。字符串没有被 CSS 解析处理器。如果选择器的主题没有属性 X，返回一个空字符串。属性区分大小写名称取决于文档语言。

http://www.w3.org/TR/CSS2/generate.html#propdef-content

【问题讨论】：

不，不是。您可以使用<a data-abc="abc" href="">abc</a>，然后使用content: attr('data-abc')。
@Blender 好的，谢谢！如果这是唯一的方法，我会这样做。
另外，也许（但可能不适用于您可能想做的事情）尝试text-shadow: 50px 0 0 black 或类似的东西。

标签： css

【解决方案1】：

您可以将字符串放入内容中：。这是有关它的相关文档：http://www.w3.org/TR/CSS2/syndata.html#strings

【讨论】：

但是您必须将其硬编码到 CSS 中，而不是直接从 HTML 元素中获取。

【解决方案2】：

不，这是不可能的，因此最好考虑原始问题，这是假设的解决方案。

在CSS3 Generated and Replaced Content Module 草案中，有可能将content: contents 用于:after 伪元素，但这仅在元素内容的唯一使用情况下才有效（您将拥有content: none对于真实元素），即它不用于复制内容。此外，它是一个非常过时的模块，它提出的大部分新奇事物（包括这个）都没有已知的实现。

【讨论】：