altı çizili sonra gelmiş aşağıdakicss: set içerik değil navigasyon bağlantıları ayırmak için
#menu-main li a:after{
content: " * ";
}
akım öğe "*" olduğu, is şimdi
text-decoration: underline;
benim sorunum ek alır Ayrıca, belirtirken,
Ben
#menu-main li a:after{
text-decoration: none !important;
}
fakat etkisi yoktur
Metnin altından nasıl çizileceğine dair bir fikriniz var mı?
Normal akışta, sözde öğe, öğenin boyutlarını genişletir ve gördüğünüz, bağlantının alt çizgisinin alt çizgisidir. Doğrulamak için a:after {text-decoration: line-through;} ekleyin. bunlar artık onların ana elemanlarının boyutlarını etkileyen sözde elemanları position: absolute kullanarak, bu yüzden ne zaman http://jsfiddle.net/Ronny/Smr38/
Temelde, çizgiler, doğru yerde kesilir:
İşte önerilen bir çözüm. İşaretçi olayları, vurgulu durum ve odak halkaları gibi şeylere hala dikkat etmeniz gerekiyor, ancak en azından bunu anlamanızı istedim.
İşaretleme kontrolü sizdedir, sen
a { text-decoration: none }
a span { text-decoration: underline }
:after pseudoelement won'dan enjekte içeriği sizin linke
<a href="..."><span>your link</span></a>
bir yayılma takıp kullanabilirsiniz
'un altının çizilmemesi durumunda, stili li:after (olasıysa) stiline uygulayabilirsiniz, böylece
#menu-main li:after{
content: " * ";
}
Stil tasarımına yardımcı olmak için işaretlemeden kaçınılmalıdır. Sözde sınıfın liste öğesine uygulanması bir gelişmedir, ancak yine de, stil uğruna semantikler ile bükülüyor. – daddywoodland
Sözde bir dizilim semantiği nasıl etkileyebilir? OP, zaten bir başka sözdizim içinde '*' yerleştirmiştir, bu yüzden orijinal anlamsal olarak korunmuştur. – fcalderan
Yeterince adil, yıldız işaretini liste öğesine ekleyerek semantiği etkilemez. Açıkçası şekillendirmeye yardımcı olmak için bir span ekliyor. – daddywoodland
Bu eski bir soru, ancak Google'ı kullanarak bulduğunuz şeydir, bu yüzden "ebeveyn" boyutuna katkıda bulunmak için sözde öğeye ihtiyaç duyduğunuzda çözümümü paylaşacağımı ve mutlak konumlandırmanın bazı nedeni: genişliği 0 olduğunu
#menu-main li a:after{
content: " * ";
display:inline-block; /* So we can set a width */
width: 0;
margin-left: 10px; /* "Size" of the Pseudo-element */
}
yana, bir text-decoration göstermez. Ayrıca, kabul edilen yanıtla karşılaştırıldığında stiller arasında daha az kod ve daha az bağımlılık içerir.
Benim durumumda bile genişliğe ihtiyacım yok, sadece satır içi satır eklemeye çalışıyor.
bu benim için mükemmel çalışır; Teşekkürler – oliverspies
Bu kromda çalışır, ancak IE'de (hatta 10) çalışır. – Puzbie