虛線在Chrome

Question

出於某種原因，用虛線邊框風格時作出線，鉻呈現兩端爲雙點，這看起來可怕特別是對短線：

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

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

即使像border-bottom: 2px dotted #000;這樣簡單的東西也不起作用。我看到一些文章建議將左/右邊框設置爲透明，但是看起來更糟的是它會切斷點的小角。儘管如此，它在Firefox中看起來很不錯。有沒有什麼辦法讓Chrome在Chrome中看起來不錯，還是我運氣不好？

Answer 1

您可以絕對使用邊框屬性定位僞元素，並用「點」寬度偏移位置以隱藏呈現爲雙點的第一個和最後一個點。

.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

如果你只想設置邊框底部，爲什麼不嘗試文字修飾：強調，

然後設置文字裝修風格：點綴

看到這個https://developer.mozilla.org/id/docs/Web/CSS/text-decoration-style