9.1 疑似要素 ::before と ::after
::before と ::after は CSS の強力なツールで、HTML を変更せずに要素の内容の前後に装飾要素を追加できるんだ。視覚効果の作成、UI の改善、スタイルの追加に広く使用されてるよ。
説明:
::before: 要素の内容の前に追加される疑似要素::after: 要素の内容の後に追加される疑似要素
シンタックス:
element::before {
/* before 疑似要素のスタイル */
}
element::after {
/* after 疑似要素のスタイル */
}
主なプロパティ
::before と ::after は、カラー、サイズ、ポジショニング、背景、シャドウなどのほとんどの CSS プロパティを含めることができる。だけど、疑似要素が見えるようにするには、content とサイズを指定する必要がある。
content: 疑似要素の内容を設定する。テキストや画像、あるいは空の文字列でも OKdisplay: 疑似要素の表示タイプを設定する。通常はblockやinline-blockを使用position: 疑似要素のポジショニングを管理する（例:absoluteやrelative）widthとheight: 疑似要素のサイズを設定する
9.2 テキストの追加
content プロパティを使えば、簡単に任意の要素の先頭または末尾にテキストを追加できるよ。
CSS
.example::before {
content: "始まり: ";
color: blue;
}
.example::after {
content: " :終わり";
color: red;
}
HTML
<body>
<p class="example">これはテキストの例です</p>
</body>
コードの説明:
.example::before: "始まり: " というテキストを要素の内容の前に追加し、青色にする.example::after: " :終わり" というテキストを要素の内容の後に追加し、赤色にする
9.3 装飾的なライン
内容を囲む装飾的なラインを追加することもできるよ:
CSS
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
HTML
<body>
<div class="decorative-line">装飾的なライン付きのテキスト</div>
</body>
コードの説明:
.decorative-line::before: 要素の内容の前に装飾的なラインを作成.decorative-line::after: 要素の内容の後に装飾的なラインを作成
9.4 アイコンの挿入
テキストが足りない？それなら簡単にアイコンを入れちゃおう:
CSS
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
HTML
<body>
<p class="icon">アイコン付きテキスト</p>
</body>
コードの説明:
.icon::before: URL 画像を使ってテキストの前にアイコンを追加
9.5 複雑な装飾要素
じゃ、もう少し難しいものを追加しようか:
CSS
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
HTML
<body>
<div class="complex-decor">装飾的なコーナーを持つ要素</div>
</body>
コードの説明:
.complex-decor::before: グラデーションと絶対位置を使ってメインコンテンツの前に装飾要素を作成.complex-decor: 疑似要素を親要素に対して相対的に位置決めできるように、親要素に相対位置を設定
9.6 アニメーションの使用
アニメーションも追加できるよ:
CSS
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
HTML
<body>
<div class="animated"></div>
</body>
コードの説明:
.animated::before: 四角い疑似要素を作成し、キーフレームを使ってその回転をアニメーション化する
GO TO FULL VERSION