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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: '::after (:after)'
slug: 'Web/CSS/::after'
tags:
- CSS
- ウェブ
- リファレンス
- レイアウト
- 疑似要素
translation_of: 'Web/CSS/::after'
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">CSS において <strong><code>::after</code></strong> は、選択した要素の最後の子要素として<a href="/ja/docs/CSS/Pseudo-elements">擬似要素</a>を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。</span>この要素は既定でインラインです。</p>
<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* リンクの後に矢印を追加 */</span>
<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span>
<span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span>
<span class="punctuation token">}</span></code></pre>
<div class="note">
<p><strong>メモ:</strong> <code>::before</code> 及び <code>::after</code> によって作成される疑似要素は<a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">要素の整形ボックスに含まれるため</a>、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような<em><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></em>には適用されません。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<div class="note">
<p><strong>メモ:</strong> CSS3 では<a href="/en-US/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と<a href="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a>を見分けやすくするために、 <code>::after</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:after</code> も使用できます。</p>
</div>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Simple_usage" name="Simple_usage">シンプルな使い方</h3>
<p>2つのクラスを作成しましょう。1つはつまらない段落で1つは楽しい段落です。これらのクラスを使用して、段落の最後に疑似要素を追加することができます。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p class="boring-text">古くつまらないテキストです。</p>
<p>つまらなくも楽しくもないふつうのテキストです。</p>
<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.exciting-text::after {
content: " <- 楽しい！";
color: green;
}
.boring-text::after {
content: " <- ツマラナイ！";
color: red;
}</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample('Simple_usage', 500, 150)}}</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">このテキストの後のオレンジのボックスを見てください。</span></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">.ribbon {
background-color: #5BC8F7;
}
.ribbon::after {
content: "かわいいオレンジのボックスです。";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{EmbedLiveSample('Decorative_example', 450, 20)}}</p>
<h3 id="Tooltips" name="Tooltips">ツールチップ</h3>
<p>この例は、 <code>::after</code> を CSS の <a href="/ja/docs/Web/CSS/attr"><code>attr()</code></a> 関数と <code>data-descr</code> <a href="/ja/docs/Web/HTML/Global_attributes/data-*">カスタムデータ属性</a>との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。</p>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><p>Here we have some
<span data-descr="collection of words and punctuation">text</span> with a few
<span data-descr="small popups that appear when hovering">tooltips</span>.
</p>
</pre>
<h4 id="CSS_3">CSS</h4>
<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="Result_3" name="Result_3">結果</h4>
<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
<td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
<td>前回の版から重要な変更はなし</td>
</tr>
<tr>
<td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td>
<td>{{Spec2("CSS3 Transitions")}}</td>
<td>擬似要素で定義されたプロパティのトランジションを許可</td>
</tr>
<tr>
<td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td>
<td>{{Spec2("CSS3 Animations")}}</td>
<td>擬似要素で定義されたプロパティのアニメーションを許可</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>2重コロンの構文を導入</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>初回定義。コロン1つの構文のみ</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<div>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("css.selectors.after")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
</ul>
|
