path: root/files/zh-cn/web/css/_doublecolon_before/index.html

---
title: '::before (:before)'
slug: 'Web/CSS/::before'
translation_of: 'Web/CSS/::before'
---
<div>
<p>{{CSSRef}}</p>

<p>CSS中，<strong><code>::before</code></strong> 创建一个<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>，其将成为匹配选中的元素的第一个子元素。<span class="seoSummary">常通过 {{ cssxref("content") }} 属性来为一个元素添加修饰性的内容。</span><span class="seoSummary">此元素默认为行内元素。</span></p>

<pre><code>/* Add a heart before links */
a::before {
  content: "</code>♥<code>";
}</code></pre>

<p><strong>注意:</strong> 由<code>::before</code> 和<code>::after</code> 生成的伪元素 <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">包含在元素格式框内</a>， 因此不能应用在<em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">替换元素上</a>，</em> 比如{{htmlelement("img")}}或{{htmlelement("br")}} 元素。</p>
</div>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox">/* CSS3 语法 */
element::before { <em>样式</em> }

/* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */
element:before  { <em>样式</em> }

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

<p>CSS3 引入 <code style="font-style: normal;">::before</code>  是为了将<a href="/en-US/docs/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">伪类</a>和<a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">伪元素</a>区别开来。浏览器也接受由CSS 2 引入的<code> :before</code> 写法。</p>

<h2 id="示例">示例</h2>

<h3 id="Adding_quotation_marks" name="Adding_quotation_marks">加入引用标记</h3>

<p>使用 <code>::before </code>伪元素的一个简单示例就是用于加入引号。此处同时使用了 <code>::before</code> 和 <code>{{Cssref("::after")}}</code>来插入引用性文本。</p>

<h4 id="HTML_内容">HTML 内容</h4>

<pre class="brush:html">&lt;q&gt;一些引用&lt;/q&gt;, 他说, &lt;q&gt;比没有好。&lt;/q&gt;.</pre>

<h4 id="CSS_内容">CSS 内容</h4>

<pre class="brush:css">q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}</pre>

<h4 id="结果">结果</h4>

<p>{{ EmbedLiveSample('Adding_quotation_marks', '500', '50', '') }}</p>

<h3 id="Decorative_example" name="Decorative_example">修饰实例</h3>

<p>我们可以用几乎任何方法定义 {{ cssxref("content") }} 中的文字和图片样式。</p>

<h4 id="HTML_内容_2">HTML 内容</h4>

<pre class="brush: html">&lt;span class="ribbon"&gt;Notice where the orange box is.&lt;/span&gt;</pre>

<h4 id="CSS_内容_2">CSS 内容</h4>

<pre class="brush: css">.ribbon {
   background-color: #5BC8F7;
}

.ribbon::before {
   content:          "Look at this orange box.";
   background-color: #FFBA10;
   border-color:     black;
   border-style:     dotted;
}</pre>

<h4 id="最终结果">最终结果</h4>

<p>{{ EmbedLiveSample('Decorative_example', 450, 60) }}</p>

<h3 id="To-do_list" name="To-do_list">待办列表</h3>

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

<h4 id="HTML_内容_3">HTML 内容</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Buy milk&lt;/li&gt;
  &lt;li&gt;Take the dog for a walk&lt;/li&gt;
  &lt;li&gt;Exercise&lt;/li&gt;
  &lt;li&gt;Write code&lt;/li&gt;
  &lt;li&gt;Play music&lt;/li&gt;
  &lt;li&gt;Relax&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h4 id="CSS_内容_3">CSS 内容</h4>

<pre class="brush: 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;
}</pre>

<h4 id="JavaScript_内容">JavaScript 内容</h4>

<pre class="brush: js">var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done');
  }
}, false);
</pre>

<p>下面展示的是最终得到的结果。请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的<code> ::before </code>伪元素。接下来建立几个待办事项来完成它们吧。</p>

<h4 id="最终结果_2">最终结果</h4>

<p>{{ EmbedLiveSample('To-do_list', 400, 300) }}</p>

<h2 id="Notes" name="Notes">注释</h2>

<p>在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 &lt;div/&gt; before and after）（记住，一定要给float元素添加width属性，否则它将不会浮动）</p>

<h4 id="HTML_内容_4">HTML 内容</h4>

<pre class="brush: html">&lt;div class="example"&gt;
&lt;span id="floatme"&gt;"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.&lt;/span&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_内容_4">CSS 内容</h4>

<pre class="brush: 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;
}</pre>

<h4 id="输出">输出</h4>

<p>{{EmbedLiveSample("Notes")}}</p>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>No significant changes to the previous specification.</td>
  </tr>
  <tr>
   <td>{{ Specname("CSS3 Transitions", "#animatable-properties", "") }}</td>
   <td>{{ Spec2("CSS3 Transitions")}}</td>
   <td>Allows transitions on properties defined on pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{ Specname("CSS3 Animations", "", "") }}</td>
   <td>{{ Spec2("CSS3 Animations")}}</td>
   <td>Allows animations on properties defined on pseudo-elements.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#gen-content', '::before') }}</td>
   <td>{{ Spec2('CSS3 Selectors') }}</td>
   <td>Introduces the two-colon syntax.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::before') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Initial definition, using the one-colon syntax</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>



<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
</div>

<p>{{Compat("css.selectors.before")}}</p>



<div id="compat-mobile">
<table class="compat-table">
 <tbody>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">参见</h2>

<ul>
 <li>{{ Cssxref("::after") }}, {{ cssxref("content") }}</li>
</ul>