垂直线，两端有点

Question

我一直在寻找这方面的解决方案，并在谷歌上没有成功。

我想创建一条垂直线，其两端有点，沿线有几个点。

img例如：

我怎样才能用css实现这个目标？ 我可以做一个带间距的虚线，但我也不知道如何创建这条线，如果可能的话呢？

Answer 1

这是一个可以帮助您解决问题的快速代码段：

.bar {
  list-style: none;
}
.bar >li {
  position: relative;
}
.bar>li:before {
  content: '\25CF';
  margin-right: 10px;
  font-size: 20px;
}
.bar>li:after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  border-left: 2px solid black;
  margin-left: 5px;
  height: 100%;
}
.bar >li:first-of-type:after {
  top: 50%;
}
.bar >li:last-of-type:after {
  top: -50%;
}

<ul class="bar">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
  <li>element 4</li>
  <li>element 5</li>
</ul>

这个想法是你使用一个列表，每个元素的项目符号被一个Unicode black circle的:before符号替换，而元素的每个:after选择符都包含元素的共享。垂线。第一个和最后一个列表元素有一个额外的规则来截断它们的边界线，因此它不会越过黑色圆圈。

调整一下以获得你想要的确切效果！

Answer 2

＆＃13;

＆＃13;

<style>
  svg {
    background-color: black;
  }
  .dotted-line {
    fill: none;
    stroke: orange;
    stroke-width: 2;
    marker: url(#circle-marker);
  }
  #circle-marker circle {
    fill: orange;
    stroke; orange;
  }
</style>
<svg height="40" width="190">
  <polyline class="dotted-line" points="20,20 70,20 120,20 170,20"/>
  <marker id="circle-marker" markerWidth="8" markerHeight="8" refX="5" refY="5">
    <circle class="foreground" cx="5" cy="5" r="3" />
  </marker>
</svg>

＆＃13;

＆＃13;

＆＃13;

（我采用＆＃34; horisontal＆＃34;面值;让它垂直是微不足道的。）

查找marker SVG element，marker-start，marker-end，marker-mid SVG属性。此处marker属性结合了三个属性（为简洁起见，因为它们全部相同）。