記事内に商品プロモーションを含む場合があります
このような疑問にお応えします。
テキストで説明しても分かりづらいと思いますので、簡単に表現すると以下のような装飾のことです。
border-bottomで表現しようにも、見出し（h2タグなど）なので横幅目一杯になってしまい、上図のように短い下線を引くことはできません。
では、どのように実装すれば良いのか、本記事では擬似要素を使って下線を引く方法について解説していきます。
擬似要素の種類
「擬似クラス」というのは聞いたことがあるかもしれませんが、「擬似要素」とは「HTMLを編集せずに特定要素を追加できるもの」と私は捉えています。
良く使うのは ::before や ::after です。
調べてみたところ、他にも ::first-letter や ::first-line があるようですが、エンジニアにもよりますが、現場では使用頻度がほぼありません。
どんな場面で使うの？
ある（HTML）要素の前後に、装飾を施したい時に使用します。
冒頭で説明した下線に使用したり、両サイドにも線を配置したり、あとはlistタグの装飾のような使い方をすることの可能です。
こんな感じ↓↓
横線の配置は「擬似要素」を使う理由がありますが、2つ目は「普通にolとliタグ使えばいいんじゃない？」と思った方も多いと思います。
正解です。ただ::beforeや::afterを使用することで、さらに変わった装飾を施すことができます。
listタグ装飾の大きさや色が変わっていることが分かりますね。
またテキストの追加も
使用頻度は少ないかと思いますが、これについてもコードを紹介していきます。
コードの紹介
では、早速実装していきましょう。
下記のような順番でご紹介します。
- 擬似要素を使って下線を引く
- 両サイドに線を引く
- 箇条書きテキストの装飾を追加する
擬似要素を使って下線を引く
See the Pen
VwpYVGo by Yu Ohshiro (@you405)
on CodePen.
前提
まず前提知識として下記があります。
- ::beforeは指定要素の「前」
- ::afterは指定要素の「後」に要素が追加
- contentプロパティに追加したい要素を指定
（テキスト以外は”のみ）
解説
コードの詳細を解説していきます。
h2::after {
content: '';
width: 110px;
height: 4px;
display: inline-block;
background-color: #337ab7;
position: absolute;
bottom: -10px;
left: calc(50% - 55px)
}
- ::afterでh2タグの「後」に要素を追加
- contentで追加する要素を指定
（今回は線なので”のみ） - width 下線の横幅を指定
- heigt 下線の高さを指定
- display inline-block要素に
- background-color 線の色を指定
- position 線の位置を変更
- bottom 線を親要素の下に
- left 親要素の左を起点として位置調整
「下線の位置を調整する」というのがポイントで、calc指定することで、親要素の真ん中に線を配置しています。
さらに、-55pxとwidthの半分の値を指定することで、線のさらに真ん中に配置しています。
両サイドに線を引く
See the Pen
JjWoewz by Yu Ohshiro (@you405)
on CodePen.
箇条書きテキストの装飾を追加する
See the Pen
JjWoezz by Yu Ohshiro (@you405)
on CodePen.
擬似要素を使用するメリットとデメリット
簡単にですが、メリット・デメリットについても書いておくとこんな感じでしょうか。
| メリット | HTMLを増やさなくて良い （CSSの追加だけで要素を追加できる） |
| デメリット | 実装に慣れるまで時間がかかる |
メリットとデメリットで抽象レベルが異なる書き方になってしまいましたが、実装上のデメリットはほぼないと思っています。
まとめ
ここまで以下のことについて解説しました。
- 擬似要素の種類
- どんな場面で使うの？
- コードの紹介
- 使用するメリットとデメリット
初めて見るときはとっつきにくい印象を受けるかと思いますが、慣れていくとHTMLコードを追加せずにCSSだけで実装できる仕様になっているのでとても便利です。
何度も使用していくうちに、便利さが理解できるようになるかと思いますので、ぜひ使ってみてください。
