CSSの擬似要素を使ってテキストの下に二重線を敷く方法

CSS

今回は、「CSSの擬似要素を使ってテキストの下に二重線を敷く方法」について紹介します。

CSSの擬似要素を使ってテキストの下に二重線を敷く方法

完成形はこちら。

※ Google Chrome、Microsoft edge、Safariで表示確認済み

See the Pen
by ゆーじろー (@yuji64)
on CodePen.

HTML

<div class="double-line">
    <span>二重線です</span>
</div>

親要素のdouble-lineの中に、spanでテキストを表示します。

CSS

span {
  position: relative;
  padding-bottom: 5px;
  border-bottom: 1px solid red;
}
span::before{
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid red;
  width: 100%;
}

1つ目の線はspanに「border-bottom」を指定して表示します。

2つ目の線は、spanの擬似要素として表示させます。

これでテキストの下に二重線を敷くことができました。

まとめ

以上が、「CSSの擬似要素を使ってテキストの下に二重線を敷く方法」でした。

 

関連記事:

大学生活でやるべきこと、やって良かったこと10選 ヒッチハイクのコツまとめ7つ！３２台乗って分かったこと。 【CSS/jQuery】左からハンバーガーメニューをアニメーションで表示させる方法 【JS】固定headerを一定間スクロールしたら背景色を変える方法