diff options
Diffstat (limited to 'files/zh-cn/web/css/_doublecolon_after/index.html')
| -rw-r--r-- | files/zh-cn/web/css/_doublecolon_after/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/_doublecolon_after/index.html b/files/zh-cn/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..b4dc41dbbf --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_after/index.html @@ -0,0 +1,157 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS伪元素 + - getComputedStyle + - getPropertyValue + - setProperty + - 布局 + - 需要移动端浏览器兼容性 +translation_of: 'Web/CSS/::after' +--- +<div>{{ CSSRef() }}</div> + +<p>CSS<a href="/zh-CN/CSS/Pseudo-elements" title="Pseudo-elements">伪元素</a><code>::after</code>用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合{{ cssxref("content") }}属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。</p> + +<pre><code>/* Add an arrow after links */ +a::after { + content: "</code>→<code>"; +}</code></pre> + +<p>{{ fx_minversion_note("3.5", "Firefox 3.5之前版本仅实现了CSS 2.0版本的语法<code> :after</code>. 且不允许在<code> position, float, list-style-* </code>等属性中使用。Firefox 3.5开始没有了这项限制。") }}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">element:after { <em>style properties</em> } /* CSS2 语法 */ + +element::after { <em>style properties</em> } /* CSS3 语法 */</pre> + +<p><code>::after表示法是在</code>CSS 3中引入的，::符号是用来区分<a href="/zh-CN/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法<code>:after。</code></p> + +<div class="note"><strong>注:</strong> IE8仅支持<code>:after。</code></div> + +<h2 id="示例">示例</h2> + +<h3 id="简单用法">简单用法</h3> + +<p>让我们创建两个类：一个无趣的和一个有趣的。我们可以在每个段尾添加伪元素来标记他们。</p> + +<pre class="brush: html"><p class="boring-text">这是些无聊的文字</p> +<p>这是不无聊也不有趣的文字</p> +<p class="exciting-text">在MDN上做贡献简单又轻松。 +按右上角的编辑按钮添加新示例或改进旧示例！</p></pre> + +<pre class="brush: css">.exciting-text::after { + content: "<- 让人兴兴兴奋!"; + color: green; +} + +.boring-text::after { + content: "<- 无聊!"; + color: red; +}</pre> + +<h4 id="输出" style="line-height: 18px;">输出</h4> + +<p>{{ EmbedLiveSample('Simple_usage', 500, 150) }}</p> + +<h3 id="装饰用法">装饰用法</h3> + +<p>我们几乎可以用想要的任何方法给 {{ cssxref("content") }} 属性里的文字和图片的加上样式.</p> + +<pre class="brush: html"><span class="ribbon">Notice where the orange box is.</span></pre> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::after { + content: "Look at this orange box."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="输出_2" style="line-height: 18px;">输出</h4> + +<p>{{ EmbedLiveSample('Decorative_example', 450, 20) }}</p> + +<h3 id="提示用法">提示用法</h3> + +<p>接下来的示例展示了用<code>::after</code><a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">伪元素</a>，<a href="/en-US/docs/CSS/attr" title="/en-US/docs/CSS/attr"><code>attr()</code></a>CSS表达式和一个<a href="/en/HTML/Global_attributes#attr-data-*" title="en/HTML/Global_attributes#attr-data-*">自定义数据属性</a> <code>data-descr</code> 创建一个纯CSS, 词汇表提示工具。在<a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html" title="css-only_tooltips.html">单独页面</a>看这个例子。</p> + +<pre class="brush: html"><p>这是上面代码的实现<br /> + 我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些 + <span data-descr="small popups which also hide again">提示</span>。<br /> + 把鼠标放上去<span data-descr="not to be taken literally">看看</span>. +</p> +</pre> + +<pre class="brush: css">span[data-descr] { + position: relative; + text-decoration: underline; + color: #00F; + cursor: help; +} + +span[data-descr]:hover::after { + content: attr(data-descr); + position: absolute; + left: 0; + top: 24px; + min-width: 200px; + border: 1px #aaaaaa solid; + border-radius: 10px; + background-color: #ffffcc; + padding: 12px; + color: #000000; + font-size: 14px; + z-index: 1; +}</pre> + +<h4 id="输出_3" style="line-height: 18px;">输出</h4> + +<p>{{ EmbedLiveSample('Tooltips', 450, 120) }}</p> + +<h2 id="规范">规范</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('CSS3 Selectors', '#gen-content', '::after') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>双冒号.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>最初版本,使用单冒号</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("css.selectors.after")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<p>{{ Cssxref("::before") }}, {{ cssxref("content") }}</p> + +<h3 id="高级用法">高级用法</h3> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle">getComputedStyle</a></p> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/getPropertyValue">getPropertyValue</a></p> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/setProperty">setProperty</a></p> |