::afterとは
- ここで説明する::after とは次の語句からなるCSSの疑似要素です。
- after
- 読み: アフター
意味: ～の後に、～に続いて
::after疑似要素の概要
この疑似要素は指定要素内の末尾に疑似的な子要素を挿入します。
セレクター::afterはセレクターに該当する要素のコンテンツボックス内の末尾に疑似的な要素を挿入します。 また、この疑似要素に content プロパティを使用することで疑似要素のコンテンツとして任意の値を挿入することも可能です。
構文
サンプルを見る前に構文を確認しておきます。この疑似要素の記述は以下のような書き方になります。
セレクター::after{プロパティ名: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
基本: contentプロパティを使う
ここでは::after疑似要素の基本的な使用方法としてcontentプロパティを使用する方法をサンプルとします。
このサンプルではdiv要素に「この要素のid属性の値は 」というテキストが内包されています。 つまり、「この要素のid属性の値は 」のテキストがコンテンツになっているわけです。
<body>
<div id="idDiv">この要素のid属性の値は </div>
</body>次のstyleコードの::after疑似要素の部分を見て下さい。背景色をアクアマリンに設定し、 contentに attr(id) " です。" という attr関数 でid値を取得した結果と、 「 です。」 という文字列を設定しています。 これはdiv要素の中に末尾の子要素を追加して、"idDiv です。"というテキストを内包するという内容です。
<style>
#idDiv{
margin: 10px;
padding: 10px;
border: 1px solid ##lightgray;
background-color: ##khaki;
width: fit-content;
}
#idDiv::after{
background-color: ##aquamarine;
content: attr(id) " です。";
}
</style>結果はdiv要素に元からある「この要素のid属性の値は 」のテキストの後に「idDiv です。」 というテキストが追加されています。つまり、これをタグとして解釈すると下記のようにdiv要素の子要素として末尾に疑似要素が追加されているということになるわけです。
<body>
<div>この要素のid属性の値は <疑似要素>idDiv です。</疑似要素></div>
</body>以上が::after疑似要素の基本的な動作となります。
参考: class属性をつかってレベル表示する。
ここでは要素のclass属性の値で評価レベルを指定し、そのclassに疑似要素を使って★の評価マークを追加するというサンプルを作ってみました。
<body>
<ul>
<li class ="clsLevel5">商品名</li>
<li class ="clsLevel4">商品名</li>
<li class ="clsLevel3">商品名</li>
</ul>
</body>- 商品名
- 商品名
- 商品名
<style>
.clsLevel5::after{
color: ##goldenrod;
content: ": 評価 ★★★★★";
}
.clsLevel4::after{
color: ##silver;
content: ": 評価 ★★★★";
}
.clsLevel3::after{
color: ##saddlebrown;
content: ": 評価 ★★★";
}
</style>