2行以上あるテキスト文に対して、全行に下線をつけたいです。
下記コードでつけることはできました。
.test{
display: inline;
background:linear-gradient(transparent 60%, #f940bc 0%);
}
<div class="test">1行目です<br>こんにちは2行目です</div>
htmlは同じで、下記のようにpositionで位置を固定すると、1行目にあった下線が消えてしまいます。
.test{
display: inline;
background:linear-gradient(transparent 60%, #f940bc 0%);
position: absolute;
top: 10rem;
left: 5rem;
}
1行目と2行目をdivで分けて、それぞれに下線を指定すれば1行目にも適応はされますが、このhtmlのコードのまま出来ないか、またpositionで固定すると何故1行目の下線が消えてしまうのか疑問でした。よろしくお願い致します。
positionを指定してない時:
positio:absoluteで固定した場合: