Dotted lines in Chrome

Question

For some reason, when using a dotted border style to make a line, Chrome renders the ends as double dots, which looks awful especially on short lines:

.text {
  border-bottom: 2px dotted #000;
}

<span class="text">Hi</span><br/>
<span class="text">lll</span><br/>
<span class="text">22</span><br/>

Even something as simple as border-bottom: 2px dotted #000; doesn't work. I saw some article suggest setting left/right borders to transparent, but that looks even worse at it cuts off small corners of the dots.

It looks fine in Firefox, though. Is there any way to make it look as good in Chrome, or am I out of luck?

Answer 1

You could absolutely position a pseudo element with the border properties and offset the position by the "dot" width to hide the first and last dots that are rendering as double dots.

.text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.text::after {
  border-bottom: 2px dotted #000;
  content: '';
  position: absolute;
  bottom: 0; left: -2px; right: -2px;
}

<span class="text">Hi</span><br/>
<span class="text">lll</span><br/>
<span class="text">22</span><br/>