How to Add a Dotted Underline Beneath HTML Text

html

responsive-design

css

best-practices

byAnton Shumikhin·Feb 14, 2025

Create a dotted underline with CSS by setting text-decoration-style to dotted:

.dotted-underline {
  text-decoration: underline;
  text-decoration-style: dotted; /* So fancy, it's like a party under each word! */
}

Use this class for typography party time:

<span class="dotted-underline">This text has a dotted underline.</span>

Get creative! Use border-bottom to customize:

.custom-dotted {
  border-bottom: 1px dotted #000; /* 007 who? I prefer #000. */
  text-decoration: none; /* Goodbye, basic underline. */
}

Classy and customized:

<span class="custom-dotted">Custom dotted underline.</span>

Inline styling 101

You don't need a CSS file to be fancy. Use inline styles or a <style> tag in the <head> for a quick fix.

An inline style like a pop song, catchy but not always the best choice:

<span style="border-bottom: 1px dotted; text-decoration: none;">Inline dotted underline.</span>

Or, define your style in the <head>, because who doesn't like being headstrong?

<head>
  <style>
    .head-dotted {
      border-bottom: 1px dotted blue; /* Underline so cool, it's blue. */
      text-decoration: none; /* We're not basic. */
    }
  </style>
</head>
<body>
  <p class="head-dotted">Head section dotted underline.</p>
</body>

Browser quirks and smart tricks

Ever seen a <abbr> with a default dotted underline? That's the Firefox and Opera magic. Combine it with a title attribute to create a tooltip:

<abbr title="Hypertext Markup Language" style="border-bottom: 1px dotted; text-decoration: none;">HTML</abbr>

Always define your style for consistency across all browsers. And remember, avoid images for underlines. They're not as sharp and lose cool points for accessibility.

Upgrade your underline

Pass the color and position test

Jazz up the color:

.colorful-dotted {
  border-bottom: 1px dotted purple; /* Because, purple rain. */
  text-decoration: none;
}

Control the gap with precision:

.spacing-dotted {
  text-decoration: underline dotted;
  text-underline-position: under; /* Like a limbo, how low can you go? */
}

Wavy and solid world

For a traditional look:

.solid-underline {
  text-decoration: underline solid;
}

Or, for the dance floor vibes:

.wavy-underline {
  text-decoration: underline wavy; /* Safety not guaranteed on surfboard. */
}

Keeping cool for novices

Newbies, follow along! This rundown of basic CSS keeps it simple. The walkway is clear, just follow the dotted line.

Tackling potential issues

Debugging the missing dot mystery

If your dotted underline does a Houdini:

Check if you forgot the border-width.
Are you using an HTML element allergic to border styling?
Hunt down that pesky CSS rule overriding your careful styling.

Creative control with pseudo-elements

Play with ::before and ::after for extra style points:

.dotted-underline::after {
  content: '';
  border-bottom: 1px dotted;
  position: absolute;
  left: 0; right: 0; /* Spreading out like a good social distancer. */
}