生成带有::before 和::after 的内容
有一组特别的伪元素，它们和content属性一同使用，使用 CSS 将内容插入到你的文档中。
你能用这些插入一个文本字符串，和在下面的实时示例里那样。试着改变content属性的文本值，看看输出是怎么改变的。你也能改变::before伪元素为::after，看到这段文本插入到了元素的末尾而不是开头。
html
我的 HTML 页面的盒子中的内容。
css.box::before {
content: "这应该显示在其他内容之前。";
}
从 CSS 插入文本字符串，我们并不会在 Web 浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。
这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。
html
我的 HTML 页面的盒子中的内容。
css.box::after {
content: " ➥";
}
这些伪元素经常用于插入空字符串，其后可以像页面上的其他元素被样式化。
下个示例，我们已经用 ::before伪元素加入了个空字符串。我们把它设为了display: block，以让它可以用 width 和 height 进行样式化。然后我们可以用 CSS 像任何元素那样样式化。你可以摆弄 CSS，改变它的外观和行为。
html
我的 HTML 页面的盒子中的内容。
css.box::before {
content: "";
display: block;
width: 100px;
height: 100px;
background-color: rebeccapurple;
border: 1px solid black;
}
::before 和 ::after 伪元素与 content 属性的共同使用，在 CSS 中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。CSS Arrow Please 网站就是一个著名的示例，它帮你用 CSS 生成一个箭头。在你创建你的箭头的时候看下 CSS，你将会看到实际使用的 ::before 和 ::after 伪元素。无论什么时候你看到了这些选择器，都要看下 content 属性，以了解 HTML 元素中添加了什么。