疑似要素 - CSS

::afterみたいなものを擬似要素という。

疑似要素 (Pseudo-elements) - CSS | MDN

• ::after: 選択した要素の後ろに装飾を行う
• ::before: 選択した要素の前に装飾を行う

contentプロパティを使って、装飾する内容を設定する

例）メインとサブにそれぞれ装飾を追加する

.main::after {
    content: "< メイン";
    color: red;
}

.sub::after {
    content: "< サブ";
    color: blue;
}

<p class="main">今日は家でまったりとプログラミング</p>
<p class="sub">お菓子を食べて、コーラを飲んで</p>

実行結果

See the Pen MVjrXN by tamago (@tamago324) on CodePen.

---

他にも色々疑似要素はあるっぽいから使うときになったら調べてみよ！

参考文献

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)