大佬教程收集整理的这篇文章主要介绍了连接作为表行的一部分的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; }
但我根本没有得到任何结果.
照片供我想要完成的内容参考:
* {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>
以上是大佬教程为你收集整理的连接作为表行的一部分的CSS元素之间的垂直线全部内容,希望文章能够帮你解决连接作为表行的一部分的CSS元素之间的垂直线所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。