はじめに
CSSにはcontentというプロパティがあります。
沢山のWebデザイン入門のような本やサイトで、装飾として紹介されています。たとえば、h1タグに適用して、おしゃれなラベルを実現したり、タグの前に記号を入れてちょっとオシャレにできたりします。::beforeや::afterなどの擬似要素と一緒に使うことが多いと思います。サイトをオシャレに、カッコよくするテクニックとしては全然使ってOKだと思います。
ただし、文字列は入れないでください。
例えば,
.hoge::before {
content:"更新"
...
}
みたいな感じで文字を装飾代わりに使うことです。記号はいいですが、文字はやめてください。
こういうパターンです
マークアップでないため、目以外でその文字が判断できない
例えばマークアップで文字を書いた場合
<span>更新</span>
みたいな感じだと、ブラウザ上から調べても「更新」と検索すればヒットします。「更新されているメニューにいきたい」ってときには調べればヒットします。
しかし、CSSのcontentで実現した場合、それはただの装飾なので、検索したところで何もヒットしません。非常に使い勝手が悪いです。コピーすらできません。
アクセシビリティ的に最悪
スクリーンリーダーの種類によっては読み込まれない可能性もあります。DOMに入っていないので。
例えばこの「更新」みたいなバッジを表す時、スクリーンリーダーで読み込んだところで何もないので、何が更新されているコンテンツなのかが全くわかりません。
「定型的な文字列だから」みたいな理由でcontentに文字いれて表現するなんてもっと最悪です。「車について調べてみた」の「調べてみた」の部分だけ使い回すからcontentで表すなんてしたら、「車について」の部分しか把握できなくてめちゃくちゃ最悪です。
なので文字列をcontentで表すのだけは本当にやめてほしいです。ちゃんとマークアップで表してください。
HTMLにスタイル当てれば必要ない
どうしてもそれはcontentを入れないと実現できないですか？たとえばオシャレなメニューを作りたい時に、「HOME」を大きく書いてその下に「ホーム」と書く場合です。
Figmaで適当につくりましたが、こんな感じです。
こういうのはflexboxで実現してあげたほうが装飾の自由度が高いです。ただ、このままだとスクリーンリーダーで2つ読み上げられてしまうので、「ホーム」の部分はaria-hidden="true"を設定してあげれば読み取られません。
See the Pen Untitled on CodePen.
こうすればcontentを使わずとも実現できます。
終わりに
逆にcontentがどこで有用なのかがわからないなと思いました。
CSSのテクニックは調べればかなり出てきますが、HTMLとCSSは正しく使い方を守って使いましょう。
追記
2023-12-17追記
スクリーンリーダーの件に関して、一部誤りがあったため訂正しました。MacのVoiceOverではCSSのcontentは読み込まれました。お詫び申し上げます。
しかし、それでもCSSのcontentで文字列を表すべきではないなと思いました。そこに文字としてある以上はマークアップで表されるべきです。