przerywane linie w Chrome

Question

z jakiegoś powodu, przy stosowaniu przerywana styl obramowania do linii, Chrome renderuje końce jako podwójnych kropek, który wygląda okropnie zwłaszcza na krótkich liniach:

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

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

Nawet coś tak prostego jak border-bottom: 2px dotted #000; nie działa. Zauważyłem, że jakiś artykuł sugeruje ustawienie przezroczystości w lewo/w prawo, ale wygląda to jeszcze gorzej, ponieważ odcina małe rogi kropek.

Wygląda jednak dobrze w przeglądarce Firefox. Czy jest jakikolwiek sposób, aby wyglądał tak dobrze w Chrome, czy mam pecha?

Answer 1

Możesz całkowicie ustawić pseudo element o właściwościach border i przesunąć pozycję o "kropkę", aby ukryć pierwsze i ostatnie kropki, które są renderowane jako podwójne kropki.

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

Answer 2

Jeśli chcesz ustawić tylko dolnej granicy, to dlaczego nie spróbować text-decoration: podkreślić,

następnie ustawić text-decoration stylu: przerywana

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