Chrome中的虚线答案

【问题标题】：Dotted lines in ChromeChrome中的虚线
【发布时间】：2017-07-26 19:04:58
【问题描述】：

由于某种原因，当使用虚线边框样式制作线条时，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 中看起来一样好，还是我不走运？

【问题讨论】：

标签： css border dotted-line

【解决方案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/>

【讨论】：

谢谢，这应该可行，假设问题只是在最后。
实际上，inline-block 如果您将任何其他文本放在同一行上，它会破坏垂直对齐，它会更好vertical-align: bottom 但我不确定它会产生什么其他副作用。跨度>
@riv 不客气。 vertical-align: bottom 应该照顾它。

【解决方案2】：

如果你只想设置边框底部，何不试试text-decoration:underline，

然后设置 text-decoration-style:dotted

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

【讨论】：

在Chrome中也有同样的问题，下划线碰到文字了，更惨。另外兼容性更差。