「複数行のテキストをノート風のデザインにコーディングしたいな」
今回はそれを実装できる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で行の高さを指定している
