--- title: Before Selector localeTitle: 选择器之前 --- ## 选择器之前 CSS **:: before**选择器可用于在内容元素之前插入任何内容。它允许设计者在元素中的内容之前执行任何css设计。它通过将**:: before**附加到要使用的元素上来使用。 我们来看一些例子: ```css p::before { content: ""; border: solid 5px #ccc } span.comment::before{ content: "Comment: "; color: blue; } ``` ```html
To infinity and beyond
I am buz lightyear, I come in peace.
May the force be with youworld!!
``` 这将显示`Hello world!!`在页面中。 不仅字符串,图像,计数器甚至没有(“”,对于clearfix有用)都可以插入到`content`属性中,而**不是HTML中** 。以创造性的方式使用`::before`和`after`可以制作很多很酷的东西。如果你很好奇,你可以看看下一个链接: [伪元素可以做一堆惊人的东西](https://www.w3schools.com/css/css_pseudo_elements.asp) #### 单结肠与双结肠 关于使用伪元素的正确方法有一些讨论:旧式单冒号( `:before` ),在CSS规范1和2中使用,与CSS3 recomendation,双冒号( `::before` ),主要是为了_“建立”伪类和伪元素之间的区别“_ 。但出于兼容性原因,仍然接受单冒号。谈到兼容性,IE8仅支持单冒号表示法。 #### 更多信息: [W3Schools CSS伪元素](https://www.w3schools.com/css/css_pseudo_elements.asp) [CSS-Tricks ::在/ ::之前](https://css-tricks.com/almanac/selectors/a/after-and-before/) [使用jQuery选择和操作CSS伪元素,例如:: before和:: after](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin)