html - 如何在图标之间创建垂直虚线(带有示例图像)

在尝试了无数次尝试并搜索了网络之后，我仍然找不到如何在图像之间在图标之间创建类似的垂直虚线，如图所示。有人对如何实现这个想法？任何帮助都感激不尽！！


注意：这不是网站的屏幕截图
因此我无法查看源代码：/

最佳答案

您可以使用border-left来实现。

检查此小提琴：fiddle

.icon {
    text-align: center;
    width: 50px;
    background: lightgray;
    border-radius: 50%;
    border: 2px solid grey;
}

.icon > i {
  margin: 33% auto;
}

.dotted:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    height: 100%;
    height: inherit;
    border-left: 2px dotted lightgrey;
}

.dotted {
    position: relative;
    margin: 10px auto;
    width: 50px;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dotted">
  <div class="icon">
    <i class="fa fa-camera-retro"></i>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="icon">
    <i class="fa fa-camera-retro"></i>
  </div>
</div>

关于html - 如何在图标之间创建垂直虚线(带有示例图像)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34692557/