この記事では主に、CSS の :before と :after で作成された疑似要素のいくつかの使用シナリオ (テキストの塗りつぶし、アイコンフォントとしての機能、進行状況ライン、タイムライン、幾何学図形など) を紹介します。お役に立てば幸いです。
1. はじめに
1.1 説明
: CSS の before と :after は疑似要素を作成します。:befor によって作成された疑似要素は、選択された要素の最初の子要素であり、:after によって作成された疑似要素です。選択した要素の最後の子要素です。
:before と :after で作成される疑似要素のデフォルトのスタイルはインライン スタイルです。
1.2 構文
/* CSS3 */ selector::before /* CSS2 */ selector:before
CSS3 では、疑似クラス (:1 つのコロン) と疑似要素 (::2 つのコロン) を区別するために :: (2 つのコロン) が導入されました。
疑似クラス: :hover、:first-child、:focus などの要素自体を操作します。
疑似要素: ::before、::after、::content などの要素のサブ要素を操作します。
IE8 では、: (コロン) のみがサポートされているため、これらのブラウザーと互換性を持たせるために、:before と :after も使用できます。
1.3 content 属性
content 属性は、擬似要素によって満たされるコンテンツを表します。
例
CSS:
.test-p {
width: 100px;
height: 100px;
margin-left: 20px;
background-color: #eee;
}
.test-p::before {
content: "♥";
color: red;
}
.test-p::after {
content: "♥";
color: blue;
}HTML ページ:
効果:
1.4 置換可能な要素
置換された要素: そのプレゼンテーションは CSS によって制御されません。これらの要素は、CSS とは独立して外観がレンダリングされるオブジェクトです。
一般的な置換可能な要素には、