95688


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)


CC BY-SA 4.0
2023-07-19T04:26:58.790
95685
2023-07-19T08:19:14.557
2023-07-19T05:03:07.730
3060
59156
question
html css
複数行のテキスト：positionで場所固定すると、全行にあった下線が消えてしまう


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


CC BY-SA 4.0
2023-07-19T06:56:18.947
95687
2023-07-19T06:56:18.947
50767
95685
answer


`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]


CC BY-SA 4.0
2023-07-19T08:00:35.430
95688
2023-07-19T08:00:35.430
3475
95685
answer


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

### 仕様

最新ではないかも知れませんが、下記の仕様が該当すると思います。（追記:
[int32_tさんの回答](https://ja.stackoverflow.com/a/95688/3054)にある仕様の方が新しいと思いますので、そちらを参照した方が良いかも知れません）

  * 原文: [『9.7 Relationships between 'display', 'position', and 'float'』](https://www.w3.org/TR/CSS22/visuren.html#dis-pos-flo)
  * 翻訳: [『9.7 'display'、'position'、'float'の関係』](https://momdo.github.io/css2/visuren.html#dis-pos-flo)

抜粋:

> ...  
>  `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`
の要素で、目的の文章部分の要素を包むのが良いと思います。

[code]

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

[code]

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


CC BY-SA 4.0
2023-07-19T08:14:02.400
95691
2023-07-19T08:19:14.557
2023-07-19T08:19:14.557
3054
3054
95685
answer