疑似要素でできること【その1】タイトルのあしらい

好きな色は紺・ネイビーです。とらりんです。

さてさて、今回は疑似要素でできる事シリーズ（何回続くかは不明）の栄えある第1回目をお届けします。

1回目はテキストに対する::before, ::afterを使ったあしらいについてご紹介します。

そもそも疑似要素とは何かのおさらいです。

代表的なものは::before, ::afterです。

他にもあるのですが私は使ったどころか存在を知らないものもありました。

下線ならtext-decorationでいいのでは？と思ったそこのあなた。

違うのです。text-decorationでは下線がテキストにピッタリくっつきがち。

line-heightである程度離すことはできますが、複数行では使えないかもしれません。

そんな時に使えるのが疑似要素。意図した場所に下線を引くことができます。

タイトルには大抵ちょっとしたあしらいが付いていますが、これも疑似要素の得意分野。

サンプルはよくあるボーダー飾りをご紹介。

テキストに背景色を付けたいときも疑似要素が使えます。

これはbackground-colorプロパティでも同じですが、疑似要素の方がより細かい指定ができます。

いかがでしたか。

とても便利な疑似要素、使わない手はないですね。