如何在图标之间创建垂直线（使用示例图像）

尝试了很多事情并搜索了网页后，我仍无法找到如何在图像左侧显示的图标之间创建类似的垂直线。有人有关如何实现这一目标的想法？任何帮助都感激不尽！！如何在图标之间创建垂直线（使用示例图像）

2016-06-21 Bhaskar Saurabh Vicky

将是很好，如果有一个像.. –

欢迎SO。请访问[帮助]并参加[导览]，了解如何以及要问什么。提示：邮政编码和努力 – mplungjan

请解释更好的问题，也许增加一些图像和你迄今为止尝试过的。你越具体，越有可能获得帮助。 – reallynice

为sanjeev说，你可以伪代码之前使用之前，这里是它是如何做。运行代码段时，请在完整页面中查看。不知道错误代码是什么。

.timeline { 
 
    position: relative; 
 
    margin: 10px 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    counter-reset: section; 
 
} 
 
.timeline:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 3px; 
 
    background: #fdb839; 
 
    left: 32px; 
 
    margin: 0; 
 
    border-radius: 2px; 
 
} 
 
.timeline > li { 
 
    position: relative; 
 
    margin-right: 10px; 
 
    margin-bottom: 50px; 
 
    padding-top: 18px; 
 
    box-sizing: border-box; 
 
    padding-left: 90px; 
 
} 
 
.timeline > li:before, 
 
.timeline > li:after { 
 
    display: block; 
 
} 
 

 
.timeline > li:before { 
 
    counter-increment: section; 
 
    content: counter(section); 
 
    background: #fdb839; 
 
    width: 70px; 
 
    height: 70px; 
 
    position: absolute; 
 
    top: 0; 
 
    border-radius: 50%; 
 
    left: -1px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: #Fff; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    border: 15px solid #fff; 
 
    box-sizing: border-box; 
 
} 
 
.timeline > li:after { 
 
    clear: both; 
 
}

<ul class="timeline"> 
 
    <li> 
 
    asdfasdf 
 
    </li> 
 
    <li> 
 
    asdfsdf 
 
    </li> 
 
</ul>

来源

2016-06-23 10:23:13

谢谢。它适合我。 –

可以使用CSS创建它：选择

来源

2016-06-21 09:36:59

下面是一个示例如何完成：https://jsfiddle.net/v5stsyta/7/ –

如何在图标之间创建垂直线（使用示例图像）

回答

相关问题