html - 如何使用 CSS 构建一条两边都有边框的虚线

Question

我有 2 个圆圈，我在它们之间使用了 <hr/>对于虚线。

<td >
 <asp:Image ID="grrenimg" runat="server" ImageUrl="~/Images1/" />
 </td>
 <td>
   <hr class="dashed-lines" style=""/>
 </td>
 <td style="width: 2%">
 <asp:Image ID="redimg" runat="server" ImageUrl="~/Images2" />
 </td>

我需要这样的东西:

Answer 1

#Line {
  width: 100%;
  height: 1px;
  border-bottom: 2px dashed white;
  display: block;
}

#LineWrapper {
  background: gray;
  padding: 5px 0 5px 0;
   position: relative;
   top: 50px;
}

#LineWrapper::after {
    width: 30px;
    height: 30px;
    background: green;
    border: 2px solid gray;
    position: absolute;
    content: "";
    display: block;
    left: -6px;
    top: -10px;
    border-radius: 50%;
}

#LineWrapper::before {
    width: 30px;
    height: 30px;
    background: red;
    border: 2px solid gray;
    position: absolute;
    content: "";
    display: block;
    right: -6px;
    top: -10px;
    border-radius: 50%;
}

<div id="LineWrapper">
<span id="Line"></span>
</div>