cssのみでノート風の罫線を背景に引く【css】
cssでテキストの行間に均等に線を引くテクニックです。
ノート風な罫線が背景に引けます。
サンプルコードはこちら。
See the Pen
NWNZdwR by nanami (@nanami_po)
on CodePen.
ポイントはline-heightとbackground-sizeを同じにすること。
線の幅は
background-image: linear-gradient( #fff .1px, transparent .1em );
この1pxの部分で変更できます。
表示する内容を<br>で改行する場合はこちらのコードは不要です。
.note-txt{
border-bottom: 1px solid #fff;
margin:0;
}
.note-txt::before{
content: "";
position: absolute;
border-top: 1px solid #fbf5e7;
width: 100%;
margin-left: -20px;
}
ブロック要素をいくつか並べたい場合は重なりの部分を削除する必要がありますので､上記のコードが必要となります。
上から背景と同じ色の線をかぶせて、重複する線を消しています。
margin-left: -20px;
こちらは.note pのpadding-leftと同じ分だけマイナスにしてください。
色々応用すれば手紙風のテキストも簡単に作成できます。
See the Pen
VwaJmoE by nanami (@nanami_po)
on CodePen.
border-bottomやtext-decoration: underlineでは要素の長さに線の長さも影響されてしまいますが､こちらのコードを使えば幅いっぱいに罫線が引けます。
良かったら参考にしてください◎
関連記事
