複数行のテキスト：positionで場所固定すると、全行にあった下線が消えてしまう


2行以上あるテキスト文に対して、全行に下線をつけたいです。  
下記コードでつけることはできました。

[code]

        .test{
            display: inline;
            background:linear-gradient(transparent 60%, #f940bc 0%);
        }
[/code]

[code]

        <div class="test">1行目です<br>こんにちは2行目です</div>
[/code]

htmlは同じで、下記のようにpositionで位置を固定すると、1行目にあった下線が消えてしまいます。

[code]

    .test{
        display: inline;
        background:linear-gradient(transparent 60%, #f940bc 0%);
        position: absolute;
        top: 10rem;
        left: 5rem;
    }
    
[/code]

1行目と2行目をdivで分けて、それぞれに下線を指定すれば1行目にも適応はされますが、このhtmlのコードのまま出来ないか、またpositionで固定すると何故1行目の下線が消えてしまうのか疑問でした。よろしくお願い致します。

**positionを指定してない時:**

[![positionを指定してない時](https://i.stack.imgur.com/8Qxs1.png)](https://i.stack.imgur.com/8Qxs1.png)

**positio:absoluteで固定した場合:**

[![positio:absoluteで固定した場合](https://i.stack.imgur.com/5vH4O.png)](https://i.stack.imgur.com/5vH4O.png)




`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 で(グラデーションではなく)下線を引くといいかもしれません。

[code]

    .test {
        text-decoration: underline 40% #f940bc;
        text-underline-offset: -0.3em;
        text-decoration-skip-ink: none;
        position: absolute;
        top: 1rem;
        left: 5rem;
    }
[/code]

[code]

    <div class="test">1行目です<br>こんにちは2行目です</div>
[/code]




`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 で(グラデーションではなく)下線を引くといいかもしれません。

[code]

    .test {
        text-decoration: underline 40% #f940bc;
        text-underline-offset: -0.3em;
        text-decoration-skip-ink: none;
        position: absolute;
        top: 1rem;
        left: 5rem;
    }
[/code]

[code]

    <div class="test">1行目です<br>こんにちは2行目です</div>
[/code]

