マーカーのような下線の作り方（CSS）

症状

マーカーのような下線にしたが、スマホの時に一番下の所だけに引かれていたので、文字全てに下線が引かれるようにしたい。

その時使用していたCSS↓

h1 {
position: relative;
padding: 0 .4em .1em;
}

h1::after {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
content: '';
width: 100%;
height: 10px;
background-color: #b6f0fc;
}

原因

解決策

background-image: linear-gradient(transparent 50%, #ffafaf 50%);

CSSの「linear-gradient」でラインマーカーのような下線ができた！

詳しくはこちらのサイトに載っています↓

http:/○○