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>

が

NB： OPのイラストには、下の境界は非常にテキストの縁に到達しない - これで私は透明色を追加したので、リニアグラデーションの両側で