web-dev-qa-db-ja.com

HTMLテキストの下に点線の下線を追加する方法

テキストの下の行が標準の下線ではなく点線になるように、HTMLテキストに下線を付けるにはどうしますか？できれば、別のCSSファイルを使用せずにこれを実行したいと思います。私はhtmlの初心者です。

htmlunderline
83
parap

CSSなしでは不可能です。実際、<u>タグは、ブラウザーの組み込みCSSを使用してテキストにtext-decoration:underlineを追加するだけです。

できることは次のとおりです。

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>
129
Alfred Xing

CSSがなければ、基本的にイメージタグの使用にこだわることになります。基本的にテキストの画像を作成し、下線を追加します。それは基本的にあなたのページがスクリーンリーダーにとって役に立たないことを意味します。

CSSを使用すると、簡単です。

HTML：

<u class="dotted">I like cheese</u>

CSS：

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

実行例

ページの例

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>
15
epascarello

次のCSSコードを使用してください...

text-decoration:underline;
text-decoration-style: dotted;
14
Shakeel Ahmed

HTML5要素は点線の下線を付けることができるため、下のテキストは通常​​の下線ではなく点線になります。そして、title属性は、ユーザーが要素の上にカーソルを置いたときにツールヒントを作成します。

注： FirefoxおよびOperaではデフォルトで点線の境界線/下線が表示されますが、IE8、Safari、およびChromeにはCSSの行が必要です：

<abbr title="Hyper Text Markup Language">HTML</abbr>
5
Fatima Waheed

@ epascarelloによる回答の再フォーマット：

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
3
anatoly techtonik

コンテンツに複数の行がある場合、下の境界線を追加しても役に立ちません。その場合、使用する必要があります、

text-decoration: underline;
text-decoration-style: dotted;

テキストと行の間のスペースを広げたい場合は、単に、

text-underline-position: under;
3
Darshana Gunawardana