在 CSS 中,可以通过设置content属性来实现文字前面添加样式。
例如,以下代码可以实现在文本前面添加一个“✓”符号:
p::before { content: "✓ "; }
如果想对添加的内容进行样式设置,可以在 ::before 伪元素上使用 CSS 属性:
p::before { content: "✓ "; color: red; font-size: 1.5em; }
另外,还可以使用 ::after 伪元素实现在文本后面添加内容。
p::after { content: "(完)"; }
在 ::before 和 ::after 伪元素上可以使用继承属性(如 font 系列属性)进行样式设置,但是不支持所有属性(如background 系列属性)。
需要注意的是,在使用 ::before 和 ::after 伪元素时,要保证当前元素具有非空的 content 内容,否则伪元素并不会生效。
最后,需要说明的是,伪元素本身并不在文档流中,不能通过 JavaScript 操作。如果需要使用 JavaScript 操作伪元素,可以通过添加真实元素的方式(如添加一个 span 元素)来实现。