Metin ile kenarlık arasındaki boşluk

Question

Metin ile sass/css kullanılarak eklenmiş görüntüdeki metin altındaki sınır arasında nasıl mesafe oluştururum?

Uzaklığın 5px ve metnin yazı tipi boyutunun 15px olmasını istiyorum.

Ben

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

yapıyor çalıştı ama bu çok geniş bir sınır yarattı.

Answer 1

negatif

{

alt deneyin: -5px;

} & sadece bir inline elemana bir sınır ve dolgu tokat eğer, istediğiniz etkiye sahip olacak anlamına gelir DOM profiline veya hangi öğe bilgisinin tam olmaması yanında

Answer 2

.

Pseudoelements ile oynamaya gerek yok.

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

Açıkçası, ben sadece örneğin o satır içine, css dosyasında bu şekillendirme bilgi koymak gerekir.

---

Oh ve bir dahaki sefere, lütfen örnek CSS'nizi içeren örnek HTML'yi ekleyin. Rahatsız etmemin tek nedeni, çözümün "15, Trebek için padding nedir?" Kadar basit olmasından kaynaklanıyordu.

Answer 3

Yukarıdaki kod parçasında geliştirilebilecek birkaç şey hissediyorum.

1. Sen durumda sen bunu deneyebilirsiniz Her durumda psuedo elemanı

kullanmak istiyorum, Bunun için mutlak konumlandırma kullanmamalısınız istenen etkinin

için psuedo eleman gerekmeyebilir.

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