如何在图标之间创建垂直线（带示例图像） [英] How to create a vertical line between icons (with example image)

问题描述

在尝试了许多事情并搜索网络后，我仍然无法找到如何在图像左侧所示的图标之间创建类似的垂直线。有人对如何实现这个想法？任何帮助将非常感激！

After trying numerous things and searching the web I still can't find out how to create a similar vertical line between the icons as shown in the left ofthe image. Someone an idea on how to achieve this? Any help will be much appreciated!!

推荐答案

你可以使用之前的伪代码作为sanjeev说，这里是如何做。运行代码段时以全页查看。不确定错误代码是什么。

You can use before pseudo code as sanjeev said and Here's how it is done. View in full page when you run the snippet. not sure what's the error code is for.

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

这篇关于如何在图标之间创建垂直线（带示例图像）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！