CSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介-CSSチュートリアル-php.cn

CSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介

不言

リリース： 2018-10-27 11:16:58

オリジナル

9972 人が閲覧しました

デフォルトでは、Web ページ上のテキストフォントには下線スタイルがありませんが、Web ページ上のリンクではないテキストの下に下線が表示されることがあります。では、この下線スタイルはどのように実装されているのでしょうか。この記事ではCSSで文字に下線を設定する方法を紹介します。次に、具体的な内容を見ていきましょう。

CSS には text-decoration 属性があります。この属性はテキストの下線を実装するために使用されます。

text-decoration 属性のコードも非常に簡単です。テキスト下線の実装は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div>php中文网文字加下划线</div>
</body>
</html>

ログイン後にコピー

CSS でテキスト下線を設定する効果は次のとおりです:

CSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介

上記の方法は非常に簡単ではありませんか?実際、CSS でテキストに下線を付けるには、CSS の border 属性を使用する方法もあります。CSS の border 属性がどのように機能するかを詳しく見てみましょう。テキストに下線を付けます。

border 属性を使用すると、下枠の border-bottom を通じてテキストの下線効果を実現できます。テキストの下線を実現するコードを詳しく見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        span{
            border-bottom: 1px solid pink;
        }
        
    </style>
</head>
<body>
<span>中文网文字下划线</span>
</body>
</html>

ログイン後にコピー

テキストの下線効果は次のとおりです。

CSSの下線を設定するにはどうすればよいですか? CSSで文字に下線を設定する方法の紹介