MENU

【CSS】複数行のテキストをノートのように下線をつける方法

「複数行のテキストをノート風のデザインにコーディングしたいな」

今回はそれを実装できるCSSをご紹介していきます。

目次

実装方法

See the Pen Untitled by masata (@masata_lm) on CodePen.

.text {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 98.5%, #000 100%);
  background-repeat: repeat-y;
  background-size: 100% 2.4em;
  line-height: 2.4;
}

ポイントはこちらの4点です。

  • linear-gradientで下線を作る
  • background-repeat: repeat-y;で下線を繰り返す
  • background-sizeで行の高さを指定している
よかったらシェアしてね!
  • URLをコピーしました!

【無料】AI × Web制作月100万ロードマップ

目次