CSS での前後の疑似要素の使用法

この記事では主に、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 とは独立して外観がレンダリングされるオブジェクトです。

一般的な置換可能な要素には、