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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
|
---
title: '::before (:before)'
slug: 'Web/CSS/::before'
tags:
- CSS
- Layout
- Pseudo-element
- Reference
- Selector
- Web
translation_of: 'Web/CSS/::before'
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">CSS における <strong><code>::before</code></strong> は、選択した要素の最初の子要素として<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。</span>この要素は既定でインラインです。</p>
<pre class="brush: css notranslate">/* リンクの前にハートを追加 */
a::before {
content: "♥";
}</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>
{{csssyntax}}
<div class="note">
<p><strong>注:</strong> CSS3 では<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>と<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を見分けやすくするために、 <code>::before</code> の表記法 (二重コロン付き) が導入されました。ブラウザーでは CSS2 で導入された <code>:before</code> も使用できます。</p>
</div>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Adding_quotation_marks" name="Adding_quotation_marks">引用符の追加</h3>
<p><code>::before</code> 擬似要素を使用するシンプルな例の1つ目は、引用符を追加するものです。引用符を挿入するために <code>::before</code> および <code>{{Cssxref("::after")}}</code> の両方を使用しています。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush:html notranslate"><q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush:css notranslate">q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}</pre>
<h4 id="Result" name="Result">結果</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 notranslate"><span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">.ribbon {
background-color: #5BC8F7;
}
.ribbon::before {
content: "このオレンジのボックスを見てください。";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}</pre>
<h4 id="Result_2" name="Result_2">結果</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 notranslate"><ul>
<li>牛乳を買う</li>
<li>犬の散歩をする</li>
<li>エクササイズ</li>
<li>コードを書く</li>
<li>音楽を演奏する</li>
<li>リラックスする</li>
</ul>
</pre>
<h4 id="CSS_3">CSS</h4>
<pre class="brush: css notranslate">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 notranslate">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="Result_3" name="Result_3">結果</h4>
<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p>
<h3 id="Special_characters" name="Special_characters">特殊文字</h3>
<p>これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することは<strong>できません</strong>。特殊文字を使用する必要がある場合で、 CSS の content の文字列に入力する場合は、 If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.</p>
<h4 id="HTML_4">HTML</h4>
<pre class="brush: html notranslate"><ol>
<li>Crack Eggs into bowl</li>
<li>Add Milk</li>
<li>Add Flour</li>
<li aria-current='step'>Mix thoroughly into a smooth batter</li>
<li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
<li>Fry until the top of the pancake loses its gloss</li>
<li>Flip it over and fry for a couple more minutes</li>
<li>serve with your favorite topping</li>
</ol>
</pre>
<h4 id="CSS_4">CSS</h4>
<pre class="brush: css notranslate">li {
padding:0.5em;
}
li[aria-current='step'] {
font-weight:bold;
}
li[aria-current='step']::after {
content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
display: inline;
}
</pre>
<h4 id="Result_4">Result</h4>
<p>{{EmbedLiveSample('Special_characters', 400, 200)}}</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-before', '::before')}}</td>
<td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
<td>前回の版から重要な変更はなし。</td>
</tr>
<tr>
<td>{{Specname("CSS3 Animations", "", "")}}</td>
<td>{{Spec2("CSS3 Animations")}}</td>
<td>擬似要素で定義されたプロパティのアニメーションを許可。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>2重コロンの構文を導入。</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>初回定義。コロン1つの構文のみ。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.selectors.before")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{Cssxref("::after")}}</li>
<li>{{Cssxref("content")}}</li>
</ul>
|
