CSS – ::before / ::afterで複数の要素を作る
::before / ::afterとは
::before
/ ::after
とはCSS擬似要素といって指定した特定の要素部分にスタイルを設定できるもので、::before
は指定した開始タグの後ろに、::after
は指定した終了タグの前に追加コンテンツを設定できる擬似要素になります。
ブロック要素またはインライン要素を作る場合
テキスト情報を追加するのではなく、ブロック要素やインライン要素のみを出力させたい場合はposition
プロパティを使います。
例
div{
position:relative;
width:100px;
height:100px;
background:gray;
}
div::before{
content:'';
position:absolute;
width:100px;
height:100px;
left:10px;
top:10px;
background-color: #FFBA10;
}
div::after{
content:'';
position:absolute;
left:20px;
top:20px;
width:100px;
height:100px;
background-color: #4287f5;
}
ここで気を付けるべきポイントは::before
/ ::after
にcontent:'';
を入れることです。これがないと::before
/ ::after
の要素が出力されません。
また出力される要素の順番は一番下にメインの要素、その上に::before要素、そして一番上に::after要素となります。
![](https://localhost8888.net/wp-content/uploads/2021/12/2021-12-29-2.33.24.png)
NG例
下記のコードのようにcontent'';
内にHTMLタグを入れてもうまく出力されません。<span class="sample_class"></span>
とテキストとして出力されます。
div::before{
content:'<span class="sample_class">';
}
div::after{
content:'</span>';
}
テキストコンテンツの場合
HTML
<p>sample text.</p>
CSS
p::before{
content:'〝';
color:gray;
}
p::after{
content:'〟';
color:gray;
}
結果
〝sample text.〟
下記の画像のように<p>〜</p>
要素内のコンテンツの前後にを追加できる仕様となっています。
![](https://localhost8888.net/wp-content/uploads/2021/12/2021-12-28-22.26.41.png)
構文
CSS3では擬似クラスと擬似要素を区別するため::
が導入されました。どちらも動作しますが::
がいいでしょう。
::before
/ ::after
を使う際は必ず両方用意する必要はなく、::before
だけといったことも可能です。
/* CSS3 */
p::before{
content:'';
}
p::after{
content:'';
}
/* CSS2 */
p:before{
content:'';
}
p:after{
content:'';
}