::before

在CSS中，::before创建一个伪元素，它是所选元素的第一个子元素。它通常用于将内容添加到具content属性的元素。它是默认内联的。

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

语法

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

CSS3引入了::before符号（用两个冒号）来区分伪类和伪元素。在CSS2中引入后，浏览器也接受:before。

实例

添加引号

使用::before伪元素的一个简单例子是添加引号。这里我们同时使用::before和::after插入引号。

HTML内容

<q>Some quotes,</q> he said, <q>are better than none.</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;
}

输出

待办事项清单

在这个例子中，我们将使用伪元素创建一个简单的待办事项列表。通常可以使用此方法向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;
}

JavaScript内容

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

这里是上面示例代码的运行实例。请注意，我们在这里没有使用图标，并且复选标记实际上是已经在CSS中设置过样式的::before。现在让我们继续。

输出

笔记

尽管Firefox 3.5中的定位修复程序不允许将内容作为单独的前向同级元素生成（按照CSS规范中的说明：“:before和：after伪元素元素与其他框之间的交互作用...就好像它们是真正的，插入到相关联的元素中的元素“），它们可以用于在无表格布局上提供轻微的改进（例如，为了实现居中）：只要将要居中的内容包裹在另一个子元素中，就可以在不添加之前或之后的兄弟节点的情况下在所需居中内容的前后加入列（即，在下面添加额外的行在语义上可能是更正确的，而不是在内容前后添加空的<div />）。（永远记得把宽度加一个浮点数，否则，它将不会浮动！）

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, .first {
  background: yellow;
  color: red;
}

输出

规范

浏览器兼容性