CSS: Kalınlaştırmak için doğru yol <a:hover> Büyük descenders yazı tipleri için alt çizgi

Question

Ben bir CSS-acemi yaşıyorum. Temelde aşağıdaki html var:

: Benim a etiketlerini gelindiğinde kalın altını olmasını istiyorum, ama büyük kuyruklu özel bir yazı tipi kullanmak

<ul> 
<li><a href="news.html">О нас</a></li> 
<li><a href="#">Галерея</a></li> 
</ul> 

Bunun için ortak hile kullanmak eğer öyleyse Ama böyle bakmak istiyorum:

a:hover { 
text-decoration: none; 
border-bottom: 2px solid; 
padding: 0; 
margin: 0; 
} 

altı çizili kadar baz sınırının altında olduğunu

:

böyle yapmayı denedi

Sonra .over için display: inline-block; ekledi:

<ul> 
    <li class="over"><a href="news.html">О нас</a></li> 
    <li class="over"><a href="#">Галерея</a></li> 
</ul> 

.over{ 
    font-size: 30px; 
    height:30px; // makes the text overlap this element 
    overflow:visible; 
} 
.over:hover { 
    border-bottom: 2px solid #ec6713; 
} 

Ama altı çizili genişliği artık tüm dizeleri için aynıdır. Ben table için inline-block değişti Sonra

ancak altı çizili yine çok aşağıda olduğu: Ama bu var Fazladan span ekleyerek sona erdi

, şimdi de var:

<ul> 
    <li><span class="over"><a href="news.html">О нас</a></span></li> 
    <li><span class="over"><a href="#">Галерея</a></span></li> 
</ul> 

.over{ 
    font-size: 30px; 
    height:30px; // makes the text overlap this element 
    overflow:visible; 
    display:inline-block; 
} 
.over:hover { 
    border-bottom: 2px solid #ec6713; 
} 

Ve bu bana nihayet istenen davranışı verir (alt çizgi genişlik dizgisi genişliğine ayarlanır ve taban çizgisine yakın konumlandırılır). Ancak bu amaç için fazladan bir span eklemek iyi bir uygulamadır mı? Bu hacky görünmüyor mu?

Answer 1

span A, anlamsız bir etiket olduğundan, kodunuza fazladan 'ağırlık' vermeyecektir Bunun için, imho, kullanmak (ama önlemek için daha iyi) tamamdır.

Alternatif olarak, aşağıdaki yapabileceğini:

<ul> 
    <li><a href="news.html">О нас</a></li> 
    <li><a href="#">Галерея</a></li> 
</ul> 

a { 
    font-size: 30px; 
    text-decoration: none; 
    position: relative; 
} 
a:hover:after { 
    content: ""; 
    border-bottom: 2px solid #ec6713; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 3px; 
} 

Ve DEMO.

Lütfen :after'un a ile örtüştüğünü unutmayın. z-index eklemeyi denedim, ancak bu düzeltmedi. 2

SEÇENEĞİ sizin a bir arka plan-resim ekleyin.