diff options
Diffstat (limited to 'files/zh-cn/web/css/_doublecolon_before/index.html')
| -rw-r--r-- | files/zh-cn/web/css/_doublecolon_before/index.html | 244 |
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"><q>一些引用</q>, 他说, <q>比没有好。</q>.</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"><span class="ribbon">Notice where the orange box is.</span></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"><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> +</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 <div/> before and after）（记住，一定要给float元素添加width属性，否则它将不会浮动）</p> + +<h4 id="HTML_内容_4">HTML 内容</h4> + +<pre class="brush: 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></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> |