CSS ・ その他
::before
要素の前に内容を追加
要素の中身の先頭に、CSSだけで装飾用の内容（文字や図形）を追加する疑似要素です。content プロパティと一緒に使います。
01
サンプルコード
HTML
1<p class="note">ご予約は前日までにお願いします。</p>
2<h2 class="heading">メニュー</h2>
CSS
1.note::before {
2 content: "※ ";
3 color: #c0392b;
4}
5.heading {
6 display: flex;
7 align-items: center;
8 gap: 10px;
9 font-size: 20px;
10}
11.heading::before {
12 content: "";
13 width: 6px;
14 height: 1.2em;
15 background: #b68235;
16}
02
実行結果
ブラウザでの表示
03
解説
::before は、要素の中身の先頭に「疑似的な要素」を追加します。content プロパティで中身を指定し、これがないと表示されません。
content に文字を入れるときは、content: "※ " のように文字列を "（ダブルクォーテーション）または '（シングルクォーテーション）で囲みます。囲まないと表示されません。
文字だけでなく、content: "" にして幅・高さ・背景色を指定すれば、線や図形などの装飾もつくれます。
中身の末尾に追加するときは ::after を使います。どちらもHTMLを書き換えずに装飾を足せるのが利点です。
04
応用例・注意点
関連する疑似要素
| 疑似要素 | 説明 |
|---|---|
::before | 中身の先頭に追加 |
::after | 中身の末尾に追加 |
::marker | リストの行頭記号 |
::placeholder | 入力欄のプレースホルダー |
::selection | 選択中の文字 |
外部リンクに印を付ける
属性セレクタと組み合わせて、外部サイトへのリンクだけに記号を付けます。
HTML
1<a href="https://example.com">公式サイト</a>
CSS
1a[href^="http"]::after {
2 content: " ↗";
3}
注意点
- 01::before で追加した文字は、選択・コピーできず、読み上げも環境によって異なります。重要な情報はHTMLに書きます。
- 02img や input など、中身を持たない要素には ::before が使えません。