如何使用CSS在两个圆之间画一条水平线？

本文介绍了如何使用CSS在两个圆之间画一条水平线？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 如何在CSS的2个圆之间绘制一条水平线？How do I draw a horizontal line in between 2 circles in CSS?它必须位于屏幕截图的中间。It has to be in the middle of them just as shown in the screenshot.此处的示例：我绘制了两个圆圈，但不要I have drawn the 2 circles, but don't know how to connect them.#status-buttons a { color: black; display: inline-block; font-size: 17px; font-weight: normal; margin-right: 0; text-align: center; text-transform: uppercase; min-width: 150px; text-decoration: none;}#status-buttons a:hover { text-decoration: none;}#status-buttons a.active span { color: white; background: #ACCF5B; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;}#status-buttons span { color: white; background: #22bacb; display: block; height: 45px; margin: 0 auto 10px; padding-top: 20px; width: 60px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;}<div id="status-buttons" class="text-center"> <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> <a href="#/form/tusdatos"><span>2</span> Step 2</a></div>请参见在JSFiddle上进行演示推荐答案您可以使用伪元素插入绝对定位的边框：You can use a pseudo-element to insert an absolutely-positioned border:#status-buttons { position: relative; /* 1 */ display: inline-block; /* 2 */}#status-buttons::after { /* 3 */ content: ""; position: absolute; width: 50%; z-index: -1; /* 4 */ top: 35%; left: 25%; border: 3px solid #ACCF5B;}#status-buttons a { color: black; display: inline-block; font-size: 17px; font-weight: normal; margin-right: 0; text-align: center; text-transform: uppercase; min-width: 150px; text-decoration: none;}#status-buttons a:hover { text-decoration: none;}#status-buttons a.active span { color: white; background: #ACCF5B; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;}#status-buttons span { color: white; background: #22bacb; display: block; height: 45px; margin: 0 auto 10px; padding-top: 20px; width: 60px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;}<div id="status-buttons" class="text-center"> <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> <a href="#/form/tusdatos"><span>2</span> Step 2</a></div>注意： 建立绝对定位的最接近祖先。 使容器仅消耗必要的宽度。 插入伪元素 确保任何水平线重叠都不会出现在圆圈上方Establish nearest positioned ancestor for absolute positioning.Make container consume only the width necessary.Insert pseudo elementEnsure that any horizontal line overlap doesn't appear above circles 这篇关于如何使用CSS在两个圆之间画一条水平线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！