擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。
by 株式会社 アーティス
以下のように記述することで使用します。
※css3になってから疑似要素名の前にコロンが2つとなりました。
設定したい要素::疑似要素名{}疑似要素の中でもよく使われるのが「before」と「after」です。
指定要素の最初の要素として追加する::before
CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。 よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。 この要素は既定でインラインです。
by MDN Web Docs
before疑似要素とは、指定要素の最初の子要素として疑似要素を追加する際に使用します。 よく「直前に追加する」なんて表現を見ますが、正しくは「最初の子要素として追加する」です。
before要素指定無
div要素の中にp要素があるというシンプルな構造です。 背景色はわかりやすくするために装飾しています。
<style>
#before-example1{
background-color: yellow;
padding: 5px;
}
</style>
<div id="before-example1">
<p>子要素１</p>
</div>子要素１
before要素指定有
表示する内容をcontentプロパティに設定します。 HTMLで記載した子要素よりも前にbefore疑似要素が追加されていることが確認できます。
<style>
#before-example2{
background-color: yellow;
padding: 5px;
}
#before-example2::before{
content: "子要素before";
display: block; /* 既定がインラインのためブロックレベルに変更 */
background-color: aqua;
}
</style>
<div id="before-example2">
<p>子要素１</p>
</div>子要素１
指定要素の最後の要素として追加する::after
CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。 よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。 この要素は既定でインラインです。
by MDN Web Docs
after疑似要素とは、指定要素の最後の子要素として疑似要素を追加する際に使用します。 よく「直後に追加する」なんて表現を見ますが、正しくは「最後の子要素として追加する」です。
after要素指定無
div要素の中にp要素があるというシンプルな構造です。 背景色はわかりやすくするために装飾しています。
<style>
#after-example1{
background-color: yellow;
padding: 5px;
}
</style>
<div id="after-example1">
<p>子要素１</p>
</div>子要素１
after要素指定有
<style>
#after-example2{
background-color: yellow;
padding: 5px;
}
#after-example2::after{
content: "子要素after";
display: block; /* 既定がインラインのためブロックレベルに変更 */
background-color: aqua;
}
</style>
<div id="after-example2">
<p>子要素１</p>
</div>子要素１
最後に
「::before」と「::after」はデザインを整えるためによく使われます。例えば、パンくずリストです。「TOP > CSS」のように階層を表現するためにページ名の間に「>」記号を入れたい場合などです。
下にサンプルを記載しておきますので、ご参考ください。またこちらは「疑似クラス」というものも使っているので合わせてどうぞ、よろしくお願い致します。
<style>
ul#sample-BreadcrumbTrail{
padding: 0 0;
margin: 0 0;
list-style: none;
}
ul#sample-BreadcrumbTrail > li{
float: left;
}
ul#sample-BreadcrumbTrail > li:not(:nth-child(1))::before{
content: ">";
margin: 0 5px;
}
</style>
<ul id="sample-BreadcrumbTrail">
<li>TOP</li>
<li>CSS</li>
</ul>- TOP
- CSS
