连接作为表行的一部分的CSS元素之间的垂直线

前端之家收集整理的这篇文章主要介绍了连接作为表行的一部分的CSS元素之间的垂直线前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想将一些CSS圈子与它们之间的垂直线连接起来.

我试图使用伪元素:选择器后如下:

  1. .circle {
  2. height: 45px;
  3. width: 45px;
  4. border-radius: 50%;
  5. border: 2px solid;
  6. position: relative;
  7. border-color: #889EB7;
  8. }
  9.  
  10. .circle:before {
  11. content: "";
  12. display: block;
  13. position: absolute;
  14. z-index: 1;
  15. left: 18px;
  16. top: 0;
  17. bottom: 0;
  18. border: 1px dotted;
  19. border-width: 0 0 0 1px;
  20. }

但我根本没有得到任何结果.

照片供我想要完成的内容参考:

解决方法

以这种方式使用:before伪元素:
  1. * {font-family: 'Segoe UI'; font-size: 10pt;}
  2. .circle {position: relative; border: 2px solid #999; border-radius: 100%; width: 50px; line-height: 50px; text-align: center; margin-top: 50px; background-color: #fff; z-index: 2;}
  3. .circle:first-child {margin-top: 0;}
  4. .circle:before {position: absolute; border: 1px solid #999; width: 0; height: 50px; display: block; content: ''; left: 50%; z-index: 1; top: -54px; margin-left: -1px;}
  5. .circle:first-child:before {display: none;}
  1. <div class="circle">Step 1</div>
  2. <div class="circle">Step 2</div>
  3. <div class="circle">Step 3</div>

猜你在找的CSS相关文章