::before

版本：CSS3

CSS中::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

语法:

E::before{sRules}

::before选择器向选定的元素前插入内容，并且它生成包含放置在元素中的内容之前的生成内容的伪元素。
::before使用content::before默认情况下，生成的伪元素是内联的，但这可以使用属性显示更改。
CSS3将伪对象选择符(Pseudo-ElementSelectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-ClassesSelectors)，但以前的写法仍然有效。即:before可转化为::before

/* css3 语法 */
element::before { 样式 }  

/* （单冒号）css2 过时语法 (仅用来支持 ie8) */
element:before  { 样式 }  

/* 在每一个p元素前插入内容 */
p::before { content: "hello world!"; }

CSS3 引入::before是为了将伪类和伪元素区别开来。浏览器也接受由CSS2 引入的:before写法。

浏览器支持


IE9+以及新版浏览器都支持`::before`
IE8以及早期IE版本不支持`::before`

例子

使用::before 伪元素的一个简单示例就是用于加入引号。此处同时使用了::before和

来插入引用性文本。

//HTML

<q>一些引用</q>, 他说, <q>比没有好。</q>.

//CSS

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

一些引用,他说,比没有好。.

我们可以用几乎任何方法定义content中的文字和图片样式。

//HTML

<span class="ribbon">notice where the orange box is.</span>

//CSS

.ribbon {
   background-color: #5bc8f7;
}

.ribbon::before {
   content:          "look at this orange box.";
   background-color: #ffba10;
   border-color:     black;
   border-style:     dotted;
}

notice where the orange box is.

在本例中我们将使用伪元素来创建一个简单的待办列表。这个方法也可用于 UI 的小幅度更改和用户体验的提升。

//html


<ul>
  <li>buy milk</li>
  <li>take the dog for a walk</li>
  <li>exercise</li>
  <li>write code</li>
  <li>play music</li>
  <li>relax</li>
</ul>

//CSS


li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

//JS

var list = document.queryselector('ul');
list.addeventlistener('click', function(ev) {
  if( ev.target.tagname === 'li') {
     ev.target.classlist.toggle('done'); 
  }
}
, false);

请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的::before伪元素。接下来建立几个待办事项来完成它们吧。

注释

在Firefox3.5中，fixed绝对定位的布局不被允许在元素前生成一个独立的元素（按照CSS，::after、:before伪类元素与其他盒模型元素是可以相互影响的，就像他们是真正的元素一样，不过是被插入到相关元素中罢了），他们可以被用来对非表格布局进行改善（例：实现元素在中心位置），只要置于中心的内容包含在元素中，那么内容的前后列不能够被添加前置或后置的兄弟元素。（i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after）（记住，一定要给float元素添加width属性，否则它将不会浮动）

//HTML

<div class="example">
<span id="floatme">"floated before" should be generated on the left of the 
viewport and not allow overflow in this line to flow under it. likewise 
should "floated after" appear on the right of the viewport and not allow this 
line to flow under it.</span>
</div>

//CSS

#floatme { float: left; width: 50%; }

/* to get an empty column, just indicate a hex code for a non-breaking space: a0 as the content (use 0000a0 when following such a space with other characters) */
.example::before {
  content: "floated before";
  float: left;
  width: 25%
}
.example::after {
  content: "floated after";
  float: right;
  width:25%
}

/* for styling */
.example::before, .example::after{
  background: yellow;
  color: red;
}

"floated before" should be generated on the left of the viewport and not allow overflow in this line to flow under it. likewise should "floated after" appear on the right of the viewport and not allow this line to flow under it.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p:before{
				content:"标题";
				background-color:yellow;
				color:red;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
	<div>
		<p>1、测试文本！</p>
		<p>2、测试文本！</p>
	</div>
	</body>
</html>

CSS中，::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

/* add a heart before links */
a::before {
  content: "♥";
}

注意:由::before和::after生成的伪元素包含在元素格式框内，因此不能应用在替换元素上，比如<img>或<br>元素。