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

Question

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

注意：它不是来自网站的屏幕截图 所以我无法查看源代码：/

Answer 1

您可以使用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>

Answer 2

这是一个旧的请求，但我一直在研究“图标到由虚线连接的图标”的完全 css 解决方案。我能够通过在容器 div 中设置两个图标来实现，然后使用容器 div 上的 :before 伪元素与虚线连接，其中内容是一长串句点（即内容：“..... ……”）。然后我使用了写作模式和文本方向的 CSS，以及一些 flexbox 来排列。这种方法是最通用的解决方案。它允许我使用不同的粗细字体和字母间距来完全调整我喜欢的点。

.container:before {
    content: ".............................................................................................................................";
    position: absolute;
    height: 100%;
    overflow: hidden; /* hide overflow on wrappers accordingly */
    font-weight: 800; /* using periods allows for customization of weight */
    letter-spacing: -8px; /* allows you to adjust dot spacing */
    writing-mode: vertical-rl; /* use for vertical orientation */
    text-orientation: upright; /* use for vertical orientation */
    z-index: -1; /* was needed to get my dots below my icons */
}

<div class="container">
    <i class="icon"></i>
    <i class="icon"></i>
</div>