0

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

<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;
}

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

<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;
}

下線に影が付いてる状態

2 件の回答 2

2

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

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

.test {
  display: inline;
  background: linear-gradient(transparent 60%, #f940bc 0%);
  text-shadow:  3px 0px 1px blue;
}

.container {
  position: absolute;
  top: 10rem;
  right: 5rem;
}
<div class="container">
  <div class="test">1行目です<br>こんにちは2行目です</div>
</div>

1

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

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 以外の手段を使って下線をつけるということになると思います。

例えば、

<!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>

結果は:

画像の説明をここに入力

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

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