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

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

:before :after は、そのような要素内では無効です。

1.5 ブラウザのサポート

IE9 バージョンは :before :after のみを完全にサポートしていますが、Chrome と Firefox は現在完全にサポートされています。

IE Edge Firefox Chrome Android 
Chrome iOS 
Safari
9 all 2 all all  all

2. アプリケーションシナリオ

2.1 テキスト文字のサポート

説明: content 属性はテキスト文字をサポートします。

例:

2.2 は iconfont

注: content 属性は、iconfont フォント チャートの表示もサポートします。これは最もよく使用されるシナリオでもあります。

例: この例では、Alibaba iconfont アイコン ライブラリを参照しています

2.3 進行状況ラインとタイムライン

説明: :before :after によって作成された疑似要素は、要素の周囲の指定された位置に 1 行に配置できます。進捗ラインとタイムライン。

1) 進捗ライン

2) タイムライン

2.4 幾何学的形状

説明: :before :after 疑似要素の境界線関連の属性を設定することにより、多くの幾何学的形状を三角形、多角形、五芒星などを作成します。

1) Rectangle

注: デフォルトでは、:before :after 疑似要素の border 属性は他の HTML 要素と同じです。

CSS:

p::before {
    width: 0px;
    height: 0px;
    content: '';
    position: absolute;
    border-top: 50px solid #f50000;
    border-right: 50px solid #6cc361;
    border-bottom: 50px solid #6167c3;
    border-left: 50px solid #fa00d9;
}

効果:

2) Triangle

説明: 特定の方向に境界線を表示し、左側と右側の境界線を非表示にし (背景を透明に設定します)、三角形の形状を表示する疑似要素。

例:

関連する推奨事項:

js 疑似要素のコンテンツを取得する 例の共有

疑似要素の使用例チュートリアル::before と::after

簡単な説明CSS 擬似要素について クラスと擬似要素を理解する

以上がCSS での前後の疑似要素の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。