::beforeとは

Webサイト制作の勉強をしている時に、参考にしているWebサイトに「::before」という要素があった。見たことはあったけど、ちゃんとその機能について調べたことなかったから、気になって調べることにした。

before要素とは

表面的に言うと「cssの擬似要素」らしい。全然意味分からんから、もう少し深掘りしてみよう。

擬似要素とは

まず擬似要素ってなんやねん、って話。「MDN web docs」によると、擬似要素は

CSSの擬似要素はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

と書いてある。文字の説明だと全然分からんから、実例を見て理解することにする。例えばこちら。

<p class="hello">こんにちは</p>
</style>.hello::first-letter {color: red;}</style>

こんにちは

上記の様にpタグで囲った「こんにちは」という文字列を、擬似要素でfirst-letterのcolorをredにすると、「こ」のみが赤色に変化する。

次はこれ。

<div>
  Hello, world!<br>
  This is Suna.
</div>
div::first-line {font-weight: bold;}

Hello, world!
This is Suna.

こうやって書くと、divタグ中の最初の文章「Hello, world!」だけfont-weightがboldになる。

要はHTML上では存在しない要素をcssで擬似的に作ることができるって感じかな。

before要素で何ができるの？

上記の例の様に、beforeを用いてできることを列挙してみる。

<p class="line">私は2文目です。</p>
.line::before { content: "私が1文目だ。"; }

私は2文目です。

本来コード上では「私は2行目です。」という文字列しか存在しないけど、ブラウザ上では「私が1行目だ。」という文字列がpタグの「私が2行目です。」の前に表示される。

また、beforeとコンビのafterをセットで使って以下の様な表記もできる。

<p>初めまして。</p>
p::before { content: "「"; }
p::after { content: "」"; }

初めまして。

上記の様にcssを書くと、ブラウザ上では『「初めまして。」』と表示される。

また「サルワカ」に書いてあったのだが、FontAwesomeのアイコンを上手い具合に表示できるみたい！テンションが上がって、日本語が下手過ぎるので、これも例を見せて紹介しようと思う。

<p>これはブックマークです。</p>
p::before {
  font-family: "Font Awesome 5 Free";
  content: "\f02e";
}

cssでfont-familyに「Font Awesome 5 free」、contentにFontAwesomeのunicodeを書くと以下の様にFont Awesomeのアイコンが文章の前に表示されます。

これはブックマークです。

この様にbeforeを上手に使えば、HTML自体を操作しなくても表現したい要素をcssで追加的に記述することができる。

【結論】

beforeを有効に用いることができると表現の幅が広がるねっ！よく調べてみると擬似クラスってものもあるらしい。今度はそれについても調べてみようかな。