Geek Answers Handbook

Dotted lines in Chrome.

For some reason, using the dot border style to create a line, Chrome displays 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 as simple as border-bottom: 2px dotted #000; , does not work. I saw that in some article it is proposed to set the left / right borders to transparent, but this looks even worse when it cuts off the small corners of the points.

Everything is fine in Firefox. Is there a way to make it good in Chrome, or am I out of luck?

+8
css border dotted-line
source share
2 answers

You can absolutely position the pseudo-element with the border properties and shift the position “width” along the width to hide the first and last points, which are displayed as double points.

 .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/>
+3
source share

If you want to set only the bottom border, why not try text-decoration: underline ,

then set the text-decoration-style: dotted style

See https://developer.mozilla.org/id/docs/Web/CSS/text-decoration-style

0
source share

More articles:


All Articles