95699


下線のあるテキストです。テキストのみに影をつけたく、text-shadowを追加しました。

[code]

    <div class="test">1行目です<br>こんにちは2行目です</div>
    
     .test{
        position: absolute;
        top: 10rem;
        right: 5rem;
        text-shadow:  3px 0px 1px blue; /*追加したコード*/
        text-decoration: underline 40% #f940bc;
        text-underline-offset: -0.3em;
        text-decoration-skip-ink: none;
    }
    
[/code]

この状態だと下線にも青色の影がついてしいます。  
htmlにshadowtestのクラスを追加し、text-shadowと下線のコードを分けてみましたが、変わりません。  
テキストのみに影をつけたい場合はどうすれば宜しいでしょうか？

[code]

    <div class="test shadowtest">1行目です<br>こんにちは2行目です</div>
    
    .test{
        position: absolute;
        top: 10rem;
        right: 5rem;
        text-shadow:  3px 0px 1px blue;
    }
    
    .shadowtest{
        text-decoration: underline 40% #f940bc; /*これで2行に線引かれる*/
        text-underline-offset: -0.3em;
        text-decoration-skip-ink: none;
    }
    
[/code]

[下線に影が付いてる状態](https://i.stack.imgur.com/wbGnk.png)


CC BY-SA 4.0
2023-07-20T01:41:50.200
95697
2023-07-20T02:50:31.423
59156
question
html css
テキストのみに影をつけ、下線のshadowは影をなくしたい。


`text-decoration`の下線はテキストの一部とみなされます。よって`text-shadow`で影がついてしまいます。

別の方法で下線をつけることを考えましょう。前回の質問のベストアンサー以外の回答がひとつの解決法になります。

[code]

    .test {
      display: inline;
      background: linear-gradient(transparent 60%, #f940bc 0%);
      text-shadow:  3px 0px 1px blue;
    }
    
    .container {
      position: absolute;
      top: 10rem;
      right: 5rem;
    }
[/code]

[code]

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


CC BY-SA 4.0
2023-07-20T02:37:23.120
95698
2023-07-20T02:37:23.120
42240
95697
answer


> テキストのみに影をつけたい場合はどうすれば宜しいでしょうか？

MDN の記事、

text-shadow  
<https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow>

に書かれているように、text-shadow は "文字列およびその装飾 (decoration) に適用される影" ということです。

その decoration には、以下の MDN に記事に書かれているように、

text-decoration  
<https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration>

下線も含まれるので、質問者さんのコードで「テキストのみに影」というのは無理そうです。

なので、decoration 以外の手段を使って下線をつけるということになると思います。

例えば、

[code]

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            .test {
                position: absolute;
                top: 10rem;
                right: 5rem;
                text-shadow: 3px 0px 1px blue;
            }
    
            .underline
            {
                border-bottom:1px solid;
            }
            
        </style>
    </head>
    <body>
        <div class="test"><span class="underline">1行目です<br />
            こんにちは2行目です</span></div>
    </body>
    </html>
    
    
[/code]

結果は:

[![画像の説明をここに入力](https://i.stack.imgur.com/09YbY.jpg)](https://i.stack.imgur.com/09YbY.jpg)


CC BY-SA 4.0
2023-07-20T02:50:31.423
95699
2023-07-20T02:50:31.423
51338
95697
answer