6.1 プロパティ content
疑似要素 ::before と ::after は、HTMLコードを変更せずに要素の内容の前後にコンテンツを追加できるよ。
見た目をよくしたり、UIを改善したり、よりインタラクティブなウェブページを作るためによく使われてるんだ。
疑似要素 ::before と ::after って何？
疑似要素 ::before と ::after は、選択した要素の内容の前後にそれぞれ挿入される仮想的な要素を作り出すよ。
これらの疑似要素は、アイコンやデコレーション、その他のビジュアルエフェクトを追加するのによく使われるんだ。
シンタックス before:
セレクタ::before {
content: "テキストや他の値";
/* スタイル */
}
シンタックス after:
セレクタ::after {
content: "テキストや他の値";
/* スタイル */
}
プロパティ content
疑似要素 ::before と ::after のキーとなるプロパティは content なんだ。
このプロパティは疑似要素の中身を決めるんだよ。テキスト、画像、またはビジュアルエフェクトだけを必要とする場合は空の値にすることもできるぞ。
プロパティ content の可能な値:
- テキスト:
"テキスト" - 画像:
url("path/to/image.png") - 空の値:
"" - 属性:
attr(attributeName) - カウンター:
counter(name)
6.2 ::before と ::after の使用例
デコレーション要素の追加
例 1: テキストの前にアイコンを追加
この例では、疑似要素 ::before を使ってリンクのテキストの前にアイコンを追加してるよ。
margin-right はアイコンとテキストの間のスペースを追加するんだ：
/* リンクのテキストの前にアイコンを追加 */
a::before {
content: "🔗";
margin-right: 5px;
}
例 2: 段落の後にデコレーション要素を追加
この例では、疑似要素 ::after が段落の後にデコレーションアイテムを追加してるよ。display: block と
text-align: right は右端に要素を整列させるために使われるんだ：
/* 段落の後にデコレーション要素を追加 */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
デコレーションの枠と背景の作成
例 3: 要素を囲むデコレーション枠
この例では、疑似要素 ::before を使って div 要素の上にデコレーションストライプを作ってるよ。
position: absolute と top: -10px は要素の上にストライプを配置するために使われるんだ：
/* 要素を囲むデコレーション枠 */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
例 4: 自動的に引用符を追加
この例では、疑似要素 ::before と ::after を使って引用ブロックの周りに引用符を追加してるよ：
/* 引用の周りに自動的に引用符を追加 */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
例 5: 見出しの番号付け
この例では、疑似要素 ::before を使って h2 見出しの前に番号を追加してるよ。
counter-increment はカウンターの値を増やし、content: counter(section) はカウンターの現在の値を挿入するんだ：
/* 見出しの番号付け */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 疑似要素の適用とスタイリング
疑似要素のスタイリング
疑似要素は他の要素と同じようにスタイリングできるよ。色、背景、ボーダー、サイズ、位置などのほとんどのCSSプロパティをサポートしてるんだ。
複雑なレイアウトのための疑似要素の使用
疑似要素はレイアウト内でデコレーション要素を作るためによく使われ、追加のHTML要素を追加する必要がないんだよね。
例: 各リスト要素のテキストの前に青のマーカーが表示されるよ：
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
</ul>
6.4 完全な実装の例
/* リンクのテキストの前にアイコンを追加 */
a::before {
content: "🔗";
margin-right: 5px;
}
/* 段落の後にデコレーション要素を追加 */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* デコレーション枠を要素の周りに追加 */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* 引用の周りに自動的に引用符を追加 */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* 見出しの番号付け */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>疑似要素 ::before と ::after の例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">アイコン付きリンク</a>
<p>テキストの後にデコレーション要素がある段落</p>
<div class="decorative-box">デコレーション枠付き要素</div>
<blockquote>自動見積もり記号付きの引用</blockquote>
<h2>番号付き見出し</h2>
<h2>もう1つの見出し</h2>
</body>
</html>
GO TO FULL VERSION