我想将一些CSS圈子与它们之间的垂直线连接起来.
我试图使用伪元素:选择器后如下:
- .circle {
- height: 45px;
- width: 45px;
- border-radius: 50%;
- border: 2px solid;
- position: relative;
- border-color: #889EB7;
- }
- .circle:before {
- content: "";
- display: block;
- position: absolute;
- z-index: 1;
- left: 18px;
- top: 0;
- bottom: 0;
- border: 1px dotted;
- border-width: 0 0 0 1px;
- }
但我根本没有得到任何结果.
照片供我想要完成的内容参考:
解决方法
以这种方式使用:before伪元素:
- * {font-family: 'Segoe UI'; font-size: 10pt;}
- .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;}
- .circle:first-child {margin-top: 0;}
- .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;}
- .circle:first-child:before {display: none;}
- <div class="circle">Step 1</div>
- <div class="circle">Step 2</div>
- <div class="circle">Step 3</div>