テキスト装飾 – ノートのような罫線

HTML

<p>CSSでテキストにノートのような罫線をつけることができます<</p>

CSS

p {
  margin: 0 auto;
  padding: 0 1.5em;
  font-size: 18px;
  line-height: 3;
  background-image: linear-gradient(rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 98%, #ccc 100%);
  background-size: 100% 3em;
}