1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
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>
|
