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