両端にドットが付いている垂直線

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

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

（私は額面で "horisontal" 取った;垂直にするために簡単です）

marker SVG elementを見上げて、そしてmarker-start、marker-end、marker-mid SVG属性。ここではという3つの属性が結合されています（簡潔にするため、すべて同じです）。ここで