小编Ste*_*per的帖子

我需要创建你在图片上看到的东西.我已经用圆圈创建了这条线,但是我遇到了黄色的问题,它应该有一个边界圆圈,中间有空格.

我已经用我已经拥有的步骤创造了一个小提琴,但黄色的是我的问题.欢迎任何建议! 的jsfiddle

我的HTML:

<section class="preview">
    <ul>
        <li class="first">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="current">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="last">
            <div>
            </div>
        </li>
    </ul>
</section>

我的CSS:

.preview ul li {
    list-style-type: none;
    position: relative;
    width: 1px;
    margin: 0 auto;
    padding-top: 35px;
    background: #fff;
}

.preview …