如何调整标签之间垂直虚线的长度？

Question

我在代码中使用了

<span style="border-right-style: dashed; border-right-width:thin;">

此外，请参见附件图片

我只想要图像右侧的线（3个破折号）。

Answer 1

这可以通过使用以下背景图像来完成。

div {
  padding: 10px 50px;
}
.dashes {
  background-image: linear-gradient(to bottom, #333 80%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 14px;
  background-repeat: repeat-y;
}

<div class='dashes'>My text</div>

或者您也可以使用3个破折号的一些小图标/缩略图图像将其放置在文本之间。

Answer 2

您可以使用 SVG 或淡化的小图像作为图标图像。这些将有助于放置更多的破折号。