How to Add a Dotted Underline Beneath HTML Text

Question

How do you underline html text so that the line beneath the text is dotted rather than the standard underline? Preferably, I would like to do this without using a separate CSS file. I'm a novice at html.

Why why can you not use CSS? Maybe create the page as one image and add the line with mspaint? — epascarello, Mar 06 '13 at 16:20
You have to use css, but it could be done using background images, border bottom is the best approach — kingdomcreation, Mar 06 '13 at 16:22
Dudes. I think he said "without using a separate CSS file", not "without CSS". Worship the newbies. — Stefan Reich, May 29 '17 at 13:38

Alfred Xing · Accepted Answer · 2014-07-10T18:07:51.537

153

It's impossible without CSS. In fact, the <u> tag is simply adding text-decoration:underline to the text with the browser's built-in CSS.

Here's what you can do:

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

edited Jul 10 '14 at 18:07

answered Mar 06 '13 at 16:24

Alfred Xing

4,406
2
23
34

In your `` element, add a ` – Alfred Xing Mar 06 '13 at 16:27
2

you can also try `dotted` instead of `dashed` – Brian Burns Mar 06 '14 at 20:09
Nice solution and it is possible. Don't make me code js for it ;) – Ahmet Can Güven Jul 13 '16 at 16:56
1

Here's the answer with multi line text support http://stackoverflow.com/a/4365458/1078641 – electroid Aug 21 '16 at 13:12
Multiline support: `border-bottom: 1px dashed #999; display: inline;` – Avatar Aug 09 '22 at 11:09

score 90 · Answer 2 · answered Jul 13 '16 at 07:53

90

Use the following CSS codes...

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

answered Jul 13 '16 at 07:53

Shakeel Ahmed

1,526
17
22

8

This should be the accepted answer. Following the box model, using a dotted `border` will be placed outside of `padding` and will thus be distant from the text. – Ryan Walker Mar 25 '20 at 22:38
18

There is a short syntax: `text-decoration: underline #000 dotted;` where the first attribute is line, second is color and the third is style. – Sos Sargsyan May 22 '20 at 14:59
Thanks Sos for improvement – Shakeel Ahmed May 22 '20 at 16:54

score 16 · Answer 3 · edited Jan 29 '14 at 22:26

Without CSS, you basically are stuck with using an image tag. Basically make an image of the text and add the underline. That basically means your page is useless to a screen reader.

With CSS, it is simple.

HTML:

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

CSS:

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

Running Example

Example page

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

score 15 · Answer 4 · answered Jul 11 '16 at 14:14

15

HTML5 element can give dotted underline so the beneath text will have dotted line rather than regular underline. And the title attribute creates a tool tip for the user when they hover their cursor over the element:

NOTE: The dotted border/underline is shown by default in Firefox and Opera, but IE8, Safari, and Chrome need a line of CSS:

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

answered Jul 11 '16 at 14:14

Fatima Waheed

151
1
2

This is the correct answer. Short and CSS-free. Thanks. – Saeed Ahadian Jan 14 '20 at 13:36
With HTML5 this really should be the accepted answer. – perry Sep 15 '20 at 04:54
2

This should only be used for abbreviations. Otherwise screen readers might do the wrong thing. – equaeghe Nov 12 '21 at 17:44

BarryCap · Answer 5 · 2021-08-14T10:46:51.457

Maybe I’m a bit late, but just use text-decoration: underline dotted, it’s a single CSS property that you can use everywhere.

Inline HTML

<u style="text-decoration:underline dotted">I have a dotted underline</u>

For a dashed underline, use text-decoration: underline dashed.

<u style="text-decoration:underline dashed">I have a dashed underline</u>

As said by Darshana Gunawardana, you can use text-underline-position: under, to have more space between the text and the line:

<u style="text-decoration:underline dotted;text-underline-position:under">I have a dotted underline</u>

In a separate CSS file

u {
  text-decoration: underline dotted;
}

Darshana Gunawardana · Answer 6 · 2018-10-09T10:19:43.050

7

If the content has more than 1 line, adding a bottom border won't help. In that case you'll have to use,

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

If you want more breathing space in between the text and the line, simply use,

text-underline-position: under;

edited Oct 09 '18 at 10:19

answered Oct 09 '18 at 10:12

Darshana Gunawardana

86
1
3

score 5 · Answer 7 · answered Oct 02 '21 at 01:23

5

You can make use of text-decoration properties:

    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;

answered Oct 02 '21 at 01:23

bishal

676
7
12

score 4 · Answer 8 · answered Dec 26 '15 at 06:54

4

Reformatted the answer by @epascarello:

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

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

answered Dec 26 '15 at 06:54

anatoly techtonik

19,847
9
124
140

score 1 · Answer 9 · answered Jan 24 '20 at 07:16

1

You can use border bottom with dotted option.

border-bottom: 1px dotted #807f80;

answered Jan 24 '20 at 07:16

Neel

9,352
23
87
128

score 1 · Answer 10 · answered Feb 05 '20 at 00:12

You can try this method:

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

Please note that without text-underline-position: under; you still will have a dotted underline but this property will give it more breathing space.

This is assuming you want to embed everything inside an HTML file using inline styling and not to use a separate CSS file or tag.

score -2 · Answer 11 · edited Sep 01 '15 at 08:00

-2

It's not impossible without CSS. For example as a list item:

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

edited Sep 01 '15 at 08:00

mirichan

1,370
1
12
25

answered Apr 30 '15 at 09:03

Davington III

107
12

6

It is impossible without CSS. The `style` attribute is simply a way of applying CSS properties directly to an element. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) on the style attribute. – mirichan Sep 01 '15 at 07:31
Adding CSS in this way is a way of effectively thinking about html styling. Of course you can argue there's no such thing but for an easy to describe method this is a possible solution. – Davington III Sep 18 '15 at 14:58
It's still CSS though, and the real preference given was to not have a separate file. The best way to go about solving the problem with that restriction is ` – mirichan Sep 18 '15 at 15:46
Well at the time I created that post it was because I had to use inline styles. It seemed worthwhile noting that possibility to others imo just incase they might not have thought of it, It's not really an appropriate topic for war & peace... They presumably found what they needed and our suggestions are there for those and any others that might need them, when I post from work I don't take into account someone pointing out something already obvious about the suggestion when it is a suggestion not a "you must do it this way" so yeah take a chill pill bro :) – Davington III Sep 21 '15 at 13:18
1

You mistake my intentions. I was making a technical observation relevant to the question asked. I had no intention of calling you out, and I apologise for it coming across that way. – mirichan Sep 21 '15 at 13:41

How to Add a Dotted Underline Beneath HTML Text

11 Answers11

Inline HTML

In a separate CSS file

Linked