如何使用CSS在文本下方绘制边框？

Question

我正在使用Bootstrap。我已将文本放置在中间，但无法在文本下方的中间形成粗边框。

Answer 1

尝试这个：

 span { border-bottom: 1px solid #CCC; padding-bottom: 5px; position: relative; } span:before { content: ''; position: absolute; width: 30px; border-bottom: 2px solid gray; bottom: -2px; left: 50%; transform: translateX(-50%); } 

 <span>National Programming</span> 

Answer 2

您可以为此使用linear-gradient（） 。 不需要伪元素:)

 div { display: inline-block; color: #ccc; font-size: 40px; padding: 5px 0; background:linear-gradient(to right, transparent 5%, #ccc 5%, #ccc 40%, #111 40%, #111 55%, #ccc 55%, #ccc 95%, transparent 95% ) bottom; background-repeat: no-repeat; background-size: 100% 2px; } 

 <div>National Programming</div> 

注意：在OP的插图中，底部边框无法完全到达文本的边缘-因此，我在线性渐变的两边都添加了透明色