テキストと境界線の間のスペース

Question

sass/cssを使用して添付された画像のように、テキストとテキストの境界線との間に距離を作成するにはどうすればよいですか？

距離を5ピクセル、テキストのフォントサイズを15ピクセルにします。

私は

.selected { 
    color: #284660; 
} 
.selected:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 0; 
    left: 0; 
    bottom: 5px; 
    border-bottom: 2px solid #284660; 
} 

をやってみましたが、それはあまりにも広かった境界線を作成しました。

Answer 1

負

{

底を試し：-5px。

}

Answer 2

あなたのDOMのプロフィールやどの要素&はあなただけinline要素のボーダーとパディングを平手打ち場合、あなたが欲しい効果があるでしょう、を参照の知識の完全な欠如に加えて。

擬似要素で再生する必要はありません。

<span style="padding-bottom:5px; border-bottom:2px solid black;">Some Text</span> 

明らかに、そのスタイリング情報をCSSファイルに入れる必要があります。私は例のためだけにインライン展開しました。

---

次回、サンプルのHTMLにサンプルHTMLを含めてください。私が悩まされたのは、ソリューションが "15、Trebekのためにpaddingは何ですか？"

Answer 3

上記のスニペットで改善できることがいくつか感じられます。

1. あなたは、あなたはケースには、あなたがこれを試すことができるいずれにしても擬似要素

を使用したい、そのための絶対位置を使用してはならない

所望の効果のための擬似要素を必要としない場合があります。

&.selected { 
color: #284660; 
border-bottom: 2px solid #284660; 
padding-bottom:10px ; // this should give you some spacing. 
}