Dotted Line

by Stalk

HTML

<ul class="myBar">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS

.myBar {
    padding: 2em 0 0 0;
    display: table;
    width: 100%;
    outline: dashed 2px gray;
}
.myBar li {
    display: table-cell;
    text-align: center;
    position: relative;
}
.myBar li:before {
    content: '';
    position: absolute;
    top: -1.5em;
    left: calc(50% - 1ex);
    width: 1.4ex;
    height: 1.4ex;
    border-radius: 1ex;
    border: solid .3ex black;
    background-color: orange;
}
.myBar li:after {
    content: '';
    display: block;
    position: absolute;
    top: calc(1ex - 1.6em);
    height: 2px;
    width: 100%;
    background: black;
    z-index: -1;
}
.myBar li:last-child:after { right: 50%; }
.myBar li:first-child:after { left: 50%; }