css - Chrome中的虚线

Question

出于某种原因，当使用虚线边框样式制作线条时，Chrome 会将末端呈现为双点，这看起来很糟糕，尤其是在短线条上：

.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 中看起来一样好，还是我不走运？

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

如果您只想设置边框底部，为什么不尝试text-decoration:underline，

然后设置text-decoration-style:dotted

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