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

Question

在尝试了很多东西并搜索了网络之后，我仍然无法找到如何在图标之间创建类似的垂直虚线，如图所示。有人关于如何实现这一目标的想法？任何帮助都感激不尽!!

注意:这不是网站的截图
所以我无法查看源代码:/

Answer 1

您可以使用 border-left 实现这一点。

检查这个 fiddle :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>