疑似要素で下線を引く | IT工房｜AI入門とWeb開発テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いものではありません。 今回は疑似要素を使用して下線を引く方法です。この方法なら二重線、三重線にも対応できます。 疑似要素で下線を引く方法 「::before」と「::after」にそれぞれ新しい要素を作成してそれに対して線を引く仕組みです。 疑似要素で下線を引くサンプル このサンプルではh1要素に疑似要素「::before」と「::after」を使用して「content: “”」で空の要素をひとつ作ります。 「left:0」「right:0」にすることで要素にUAの幅いっぱいを指定します。そしてその空の要素に下線を引きます。 このままだと「::before
