css - CSS 中的::before 和::after 伪元素选择器有什么意义？

Question

我和许多其他人一样使用过 CSS 伪元素选择器，主要是说我用过它们。

但我正在绞尽脑汁，努力想出一个将它们与标记放在一起的理由。

举个例子:

<p>Hello</p>

p::after {
   content: "*";
}

使用它比使用 <span> 有什么优势？标签？

我错过了 ::before 的要点吗？和 ::after ？在现有的语义标记上使用它们是否有一些可靠的理由？

Answer 1

The CSS2.1 spec关于生成的内容这样说:

In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically. Similarly, authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. For audio or braille in particular, user agents should be able to insert these strings.

基本上，目的是尽量减少“内容”对内容结构的污染，否则更适合作为表示元素，或者更适合自动化。