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

95

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

html underline

— Parap
ソース

13

なぜCSSを使用できないのですか？たぶん、ページを1つの画像として作成し、mspaintで行を追加しますか？

— epascarello 2013年

CSSなしでは実現できないと思います

— Cfreak

cssを使用する必要がありますが、背景画像を使用して行うことができます。ボーダーボトムが最善のアプローチです

— kingdomcreation

4

おい。彼は、「CSSなしで」ではなく、「別個のCSSファイルを使用せずに」と言ったと思います。初心者を崇拝する。

— ステファンライヒ

137

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

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

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

— アルフレッド・シン
ソース

<head>要素に<style>タグを追加します（自分の回答を編集しました）

— Alfred Xing

2

dotted代わりに試すこともできますdashed

— ブライアンバーンズ

素晴らしい解決策とそれが可能です。jsをコード化しないでください;）

— Ahmet CanGüven16年

ここでは、複数行のテキストのサポートとの答えだstackoverflow.com/a/4365458/1078641

— electroid

29

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

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

— シャキール・アーメド
ソース

3

これは受け入れられる答えになるはずです。ボックスモデルに従い、点線の使用はテキストのborder外側に配置さpaddingれるため、テキストから離れます。

— Ryan Walker

2

短い構文があります。text-decoration: underline #000 dotted;最初の属性は線、2番目は色、3番目はスタイルです。

— Sos Sargsyan

Sosの改善に感謝

— Shakeel Ahmed

15

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>

— エパスカレッロ
ソース

9

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

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

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

— ファティマ・ワヒード
ソース

これが正解です。短いCSSなし。ありがとう。

— Saeed Ahadian

4

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

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

テキストと行の間にもっと広いスペースが必要な場合は、単に

text-underline-position: under;

— ダルシャナグナワルダナ
ソース

3

@epascarelloによって回答を再フォーマットしました：

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

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

スニペットを展開

— アナトリーテクトニク
ソース

0

dottedオプションでボーダーボトムを使用できます。

border-bottom: 1px dotted #807f80;

— ニール
ソース

0

この方法を試すことができます：

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

text-underline-position: under;あなたなしではまだ下線が点線になりますが、このプロパティはそれにより多くの呼吸スペースを与えることに注意してください。

これは、インラインスタイルを使用してHTMLファイル内にすべてを埋め込み、個別のCSSファイルまたはタグを使用しないことを想定しています。

— モナジャラル
ソース

-2

CSSなしでは不可能ではありません。たとえば、リストアイテムとして：

<li style="border-bottom: 1px dashed"><!--content --></li>

— ダビングトンIII
ソース

6

CSSなしでは不可能です。style属性は、単に要素に直接CSSプロパティを適用する方法です。style属性のMDNドキュメントを参照してください。

— mirichan 2015

この方法でCSSを追加することは、htmlのスタイル設定を効果的に考える方法の1つです。もちろん、そのようなことはないと主張できますが、簡単に説明できる方法の場合、これは可能な解決策です。

— Davington III 2015

それでもまだCSSであり、与えられた本当の好みは個別のファイルを持たないことでした。その制限で問題を解決する最善の方法は<style>です。インラインスタイルはかなり控えめに使用する必要があります。

— mirichan 2015

投稿を作成した当時は、インラインスタイルを使用する必要があったためです。彼らがそれを考えていなかったかもしれない場合に備えて、他の人にとってその可能性に注意することは価値があるように見えました、それは戦争と平和にとって本当に適切なトピックではありません...必要にそれら、私はそれは、「あなたはこのようにそれを行う必要があり、」そうそうチル錠剤仲間:)取らない提案であるとき、私は提案について、すでに何かを明らかに指摘考慮に誰かを取ることはありません仕事から投稿

— DavingtonをIII

1

あなたは私の意図を誤解しています。私は尋ねられた質問に関連する技術的観察をしていた。私はあなたを呼ぶつもりはありませんでした、そしてそのように遭遇したことをお詫び申し上げます。

— mirichan