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
|
---
title: '::before (:before)'
slug: Web/CSS/::before
tags:
- CSS
- レイアウト
- 擬似要素
- リファレンス
- セレクター
- ウェブ
browser-compat: css.selectors.before
translation_of: 'Web/CSS/::before'
---
{{CSSRef}}
CSS において **`::before`** は、選択した要素の最初の子要素として[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を生成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。
```css
/* リンクの前にハートを追加 */
a::before {
content: "♥";
}
```
> **Note:** `::before` および `::after` によって作成される擬似要素は[要素の整形ボックスに含まれるため](https://www.w3.org/TR/CSS2/generate.html#before-after-content)、 {{htmlelement("img")}} や {{htmlelement("br")}} のような[置換要素](/ja/docs/Web/CSS/Replaced_element)には適用されません。
## 構文
{{CSSSyntax}}
> **Note:** CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::before` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:before` も使用できます。
## 例
### 引用符の追加
`::before` 擬似要素を使用するシンプルな例の一つとして、引用符を追加します。引用符を挿入するために `::before` および {{Cssxref("::after")}} の両方を使用しています。
#### HTML
```html
<q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>
```
#### CSS
```css
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
```
#### 結果
{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}
### 装飾の例
{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。
#### HTML
```html
<span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
```
#### CSS
```css
.ribbon {
background-color: #5BC8F7;
}
.ribbon::before {
content: "このオレンジのボックスを見てください。";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}
```
#### 結果
{{EmbedLiveSample('Decorative_example', 450, 60)}}
### やることリスト
この例では、擬似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。
#### HTML
```html
<ul>
<li>牛乳を買う</li>
<li>犬の散歩をする</li>
<li>エクササイズ</li>
<li>コードを書く</li>
<li>音楽を演奏する</li>
<li>リラックスする</li>
</ul>
```
#### CSS
```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;
}
```
#### JavaScript
```js
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('done');
}
}, false);
```
ここで上記のコードをライブで実行できます。なお、アイコンは使用しておらず、チェックマークは実際に CSS の `::before` で整形したものです。先に進んでやってみてください。
#### 結果
{{EmbedLiveSample('To-do_list', 400, 300)}}
### 特殊文字
これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することは**できません**。特殊文字を使用する必要がある場合で、 CSS の content の文字列に直接入力できない場合は、バックスラッシュの後に 16 進数の Unicode 値を続ける Unicode エスケープシーケンスを使用してください。
#### HTML
```html
<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>
```
#### CSS
```css
li {
padding:0.5em;
}
li[aria-current='step'] {
font-weight:bold;
}
li[aria-current='step']::after {
content: " \21E6"; /* 左向きの白い矢印を表す Unicode の 16 進数 */
display: inline;
}
```
#### 結果
{{EmbedLiveSample('Special_characters', 400, 200)}}
## アクセシビリティの考慮
`::before` 擬似要素を使用してコンテンツを追加することは、画面リーダーからアクセスできなくなる可能性があるため推奨されません。
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{Cssxref("::after")}}
- {{Cssxref("content")}}
|
