2

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を指定してない時:

positionを指定してない時

positio:absoluteで固定した場合:

positio:absoluteで固定した場合

3 件の回答 3

4

background: linear-gradient(... ですから、文字に下線が付いているのではなくて、CSS box の下の方に背景画像としてグラデーションが描かれています。display: inline の場合は改行が入ると CSS box が複数に別れて、それぞれの CSS box に背景画像が描画されます。

position: absolute を付けると、display: inline は無効になってブロック扱いになります。
https://drafts.csswg.org/css-position/#position-property

A position value of absolute or fixed blockifies the box,

ブロックは1つの CSS box ですから、背景画像も1つしか描画されません。

解決策としてはHTMLを変更するか、CSS で(グラデーションではなく)下線を引くといいかもしれません。

.test {
    text-decoration: underline 40% #f940bc;
    text-underline-offset: -0.3em;
    text-decoration-skip-ink: none;
    position: absolute;
    top: 1rem;
    left: 5rem;
}
<div class="test">1行目です<br>こんにちは2行目です</div>

1

position: absolute;で絶対参照になっていて、top: 10rem;で位置指定しているからじゃないですか。

1

position: absolute を指定すると、 display には inline を指定していても block として計算されます。

仕様

最新ではないかも知れませんが、下記の仕様が該当すると思います。(追記: int32_tさんの回答にある仕様の方が新しいと思いますので、そちらを参照した方が良いかも知れません)

抜粋:

...
position が値 absolute または fixed を持つ場合、ボックスは絶対位置であり、'float'の算出値は'none'となり、かつ表示は下記のテーブルに従って設定される。
...

指定値 算出値
inline-table table
inline、table-row-group、table-column、table-column-group、table-header-group、table-footer-group、table-row、table-cell、table-caption、inline-block block
その他 指定値と同じ

対処

HTMLの構造を変えずにこれに対処する方法は思い付きません。何らかの、position: absolute の要素で、目的の文章部分の要素を包むのが良いと思います。

.underline {
  display: inline;
  background: linear-gradient(transparent 60%, #f940bc 0%);
}

.container {
  position: absolute;
}
<div class="container">
  <span class=underline>1行目です<br>こんにちは2行目です</span>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。