CSS 内容

CSS 有一个叫做content的属性。它只能与伪元素::after和::before一起使用。它写起来像伪选择器（带冒号），但它被称为伪元素，因为它实际上并没有选择页面上存在的任何内容，而是向页面添加了一些新内容。这就是它的样子

.email-address::before {
   content: "Email address: ";
}

有了这段 CSS 代码，我们就可以使用以下 HTML 代码：

<ul>
   <li class="email-address">[email protected]</li>
</ul>

输出结果将如下所示：

• 电子邮件地址： [email protected]

也许这个例子并不能让你垂涎三尺，但伪元素内容非常有用，可以实现很多很酷的功能。让我们一起了解一些想法和注意事项。

嘿！这是内容而不是设计！

第一个问题可能是内容和设计分离主义者的关注点。你实际上是使用 CSS content 属性向页面添加文本内容，这打破了这种界限。规范已经完成，并且已经实现了这个想法，但这并不意味着它不值得讨论。如果您对 CSS content 及其用法有自己的看法，请在评论中分享。

我认为它很棒，并且非常适合 CSS。考虑上面的例子，我们为所有具有email-address类的元素添加了“电子邮件地址：”文本。这是一个设计决策，为了内容的清晰度，决定在电子邮件地址前面加上这段文本可以使内容更清晰。也许在网站的重新设计中，显示这些电子邮件地址的空间变小了，因此决定不再使用文本作为前缀，而是使用一个小图标来代替。这符合 CSS 的理念，即 HTML 内容根本不需要更改，这种更改完全可以通过 CSS 来完成。

我明天会发布一篇关于这种想法的文章。

使用特殊字符

如果你需要在 CSS 内容中使用特殊字符，那就有点奇怪了。我的做法是找出该符号的 ASCII 码。 这个字形图表 很方便。因此，在该图表中，版权 © 符号为 © - 所以 ASCII 码为 169。然后我将这个数字放到 实体转换计算器 中，它会将其转换为 CSS 所需的格式。

以下是一些随机的有用字符：

\2018 – 左单引号
\2019 – 右单引号
\00A9 – 版权
\2713 – 对勾
\2192 – 右箭头
\2190 – 左箭头

示例技巧：用对勾标记已访问的链接

用对勾标记你的已访问链接

#main-content a:visited::before {
   content:  "\2713 ";
}

使用属性

你可以将目标元素的属性插入为内容。例如，一个锚链接可能有一个 title 属性

<a title="A web design community." href="https://css-tricks.cn">CSS-Tricks</a>

你可以像这样从 content 属性中访问该 title 属性：

a:before {
   content: attr(title) ": ";
}

任何属性都可以以这种格式被访问：attr(name-of-attribute)。如果你想在 HTML 中插入一些内容以用于 CSS content 目的（但没有其他用途），你可以使用 HTML5 中新的 data- 属性前缀。

示例技巧：CSS3 工具提示

基于title属性的链接工具提示

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover::after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20;
  border-radius: 5px;   
  box-shadow: 0px 0px 4px #222;  
  background-image: linear-gradient(#eeeeee, #cccccc);  
}

此示例使用title属性，以及你在网络上找到的其他类似示例也使用 title 属性。这可能是应该使用的正确属性。但是，请注意，浏览器有自己的工具提示弹出窗口。当它出现时，它会覆盖这个，看起来很奇怪。我试图截取问题的屏幕截图，但由于某种原因，它不允许我这样做。无法抑制它，除非不使用title属性。HTML5data-属性在这里仍然有用。

需要考虑的事项

• Firebug 尚未能够定位伪元素。WebKit 浏览器中的 Web 检查器可以定位它们，但不会显示它们的属性/值。我听说 IE 开发工具也可以定位它们，但不确定属性/值。
• 在 WebKit 中，它们必须是块级元素才能旋转。Firefox 可以旋转内联元素/伪元素。
• 在 Firefox 3.0 中，伪元素不能绝对定位。
• 它们不能进行过渡或动画。

示例技巧：花哨的电子邮件链接弹出窗口

我有一个想要尝试的想法，你想创建一个垂直的姓名列表，当鼠标悬停在它们上面时，它们的电子邮件地址会从下方滑出。为了使 HTML 代码尽可能简洁，我认为使用::after伪元素和 -webkit-transition 来实现这一点会很酷。但是，唉，你不能为伪元素设置动画或过渡。

使用 ::after/content 方法，我得到了一个可工作的示例，但它不像我想象的那样滑出。使用<span>我实现了这个想法，也在演示页面中。

查看演示

示例技巧：在打印样式表中显示完整链接

@media print {
     #main-content a[href]:after { " (" attr(href) ") "; }
}

浏览器支持/可访问性

所有主要浏览器（Firefox 3+、Safari 3+、Chrome 3+、Opera 10+ 和 Internet Explorer 8+）（查看完整图表）都支持使用 ::after/::before 伪元素和 CSS content 属性，并且规范已处于完整候选推荐状态。

关于可访问性，我不确定具体情况。我尝试在我的 Mac 上使用 Safari 和 VoiceOver 来使用 电子邮件弹出链接演示。为了获得最佳的可访问性，我认为目标应该是让它读取所有文本，包括添加的 CSS 内容。我很难让它做到这一点，但我认为我曾经以某种方式让它做到了。我真的很不擅长使用 VoiceOver，发现即使在最基本的层面上让它执行我想做的事情也很令人沮丧。如果有人更了解与 CSS 内容相关的可访问性，我相信我们都希望了解更多。

更多

伪元素可以做的一大堆很棒的事情