CSSの疑似要素のcontentって、図形作ったり、画像を暗くするときによく使います。
表示させるためだけなので、content=""とだけ書くことが多く、なんか不遇なやつだなぁと思うんですが、意外と結構便利です。
例えば、

ul::before{ content : "これはリストです";
}

と書けば、ulの中に"これはリストです"と表示されるし、その装飾も疑似要素の中で出来ます。

空の時の場合分け

毎回"これはリストです"と表示されても別においしくないです。
リストが空のときに、"リストは空です"と表示されればいくらか便利。
特にDjangoのテンプレートで{% empty %}とか書くとHTMLが汚れてしまいますし。
空の時は

ul:empty::before{ content : "リストは空です";
}

と書けばOK。
空じゃないときは、セレクタをul:not(:empty)::beforeに。

さらに場合分け

リストの中身が1つの時と、2つ以上の時とで場合分けしたいときがありました。

2枚以上あるときは、注意書きを表示して、1枚しかないときは非表示。

contentプロパティを書き換えればいいと思いきや、疑似要素はDOMではないため、javascriptではアクセスできない模様…。
しかし、content : attr(属性名)とCSSで指定しておけば、その属性の値がcontentになるので、

//HTML
<ul content="表示する内容"></ul>

//CSS
ul::before{ content : attr(content)
}

とすれば、javascriptでulのcontent属性の値を変えれば、表示する内容を変えられます。
あら便利。
ちなみに、video, imgみたいな置換要素(replaced element)には疑似要素効かないです。
だからみんなdiv等のbackground-imageプロパティで画像を張り付けてるんですね。
outside疑似要素なるものもあるらしいですが、サポートしているブラウザが少ないとかなんとか。

なんかテックブログみたいになってきましたが、まぁ良しとしよう。

今日もお読みくださりありがとうございます。
ほぼ毎日、アプリ開発や事業に関する日記を書いておりますので是非またお読みになってください！