initial commit

1 files changed, 244 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/_doublecolon_before/index.html b/files/zh-cn/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..d569b21f23
--- /dev/null
+++ b/files/zh-cn/web/css/_doublecolon_before/index.html
@@ -0,0 +1,244 @@
+---
+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>