A: öncesinden yalnızca altı çizili nasıl kaldırılır?

97

:beforeOk uygulamak için kullanarak bir dizi stilli bağlantı var .

Tüm tarayıcılarda iyi görünüyor, ancak bağlantıya alt çizgiyi uyguladığımda, :beforeparçanın (ok) altının çizilmesini istemiyorum .

Örneğin jsfiddle'a bakın: http://jsfiddle.net/r42e5/1/

Bunu kaldırmak mümkün mü? Oturduğum test stili #test p a:hover:beforeuygulanıyor (Firebug'a göre), ancak altı çizili hala orada.

Bundan kaçınmanın bir yolu var mı?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

Snippet'i genişlet

— OptimusCrime
kaynak

Belli ki bir liste istiyorsunuz ... DIV / P kombinasyonu yerine bir UL öğesi kullanın. Listelerle mermileri (veya diskleri, ...) ücretsiz alırsınız ...

— Šime Vidas

Sizin durumunuzda neden paragraflar yerine özel madde işaretli liste kullanmıyorsunuz? Aksi takdirde, ön içeriği ana p'ye uygulayın, kendisini bağlamak için değil.

— YuS

Olası stackoverflow.com/questions/8536015/…

— Oriol

177

Bunu kaldırmak mümkün mü?

Evet, satır içi öğenin görüntüleme stilini display:inline(varsayılan) yerine şu şekilde değiştirirseniz display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Bunun nedeni , CSS özelliklerinin şunu söylemesidir :

Bir satır içi öğe üzerinde belirtildiğinde veya ona yayıldığında, o öğe tarafından üretilen tüm kutuları etkiler ve ayrıca satır içi bölümü bölen akış içi blok düzeyi kutulara da yayılır (bkz. Bölüm 9.2.1.1). […] Diğer tüm unsurlar için, herhangi bir akış içi çocuğa yayılır. Bu metin dekorasyonu Not yayılmadıysa yüzen mutlak konumlu torunları, ne de böyle satır içi bloklar ve satır içi tablolar gibi atomik satıriçi seviyeden soyundan içeriğine .

(Vurgu benim.)

Demo: http://jsfiddle.net/r42e5/10/

_{@Oriol'a, teknik özellikleri kontrol etmeme ve geçici çözümün yasal olduğunu görmeme neden olan geçici çözümü sağladığı için teşekkürler.}

— Phrogz
kaynak

2

text-decoration:underlineBir üst öğeye uygulanmış olanı geçersiz kılabilirsiniz display:inline-block. Bir örneğe bakın: jsfiddle.net/aZdhN/1 . Ardından, sorucunun sorunu şu şekilde çözülebilir: stackoverflow.com/a/17347068/1529630

— Oriol

3

Gördüğüm kadarıyla, bu Internet Explorer'da çalışmıyor (8-10 test edildi). IE ile nasıl başa çıkılacağına dair bir fikrin var mı?

— Linus Caldwell

IE8-11'de de çalışan bir çözüm buldum: stackoverflow.com/a/21902566/1607968

— LeJared

53

IE8-11'de bir Hata var , bu yüzden display:inline-block;tek başına kullanmak orada işe yaramayacak.

Açıkça text-decoration:underline;: before-content ayarını yaparak ve ardından bu kuralın üzerine yazarak bu hata için bir çözüm buldum.text-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

Burada çalışma örneği: http://jsfiddle.net/95C2M/

Güncelleme: jsfiddle artık IE8 ile çalışmadığından, bu basit demo kodunu yerel bir html dosyasına yapıştırın ve IE8'de açın:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

— LeJared
kaynak

IE8 olsaydı, köprü bağlantılı bir görüntünün altını çizen bir durum olsaydı , yalnızca <img style="text-decoration:underline">içeriden kapatılabilirdi (ve işte anahtar <a style="padding:0; border:none;">

— Bob Stein

Ne yazık ki jsfiddle IE8'de doğrulanamıyor çünkü jsfiddle IE8'de çalışmıyor.

— user2867288

Ne yazık ki hala IE8 ile çalışan herhangi bir çevrimiçi kod paylaşım aracı bulamadım. Yukarıdaki cevaba, bir html dosyasına yapıştırabileceğiniz ve yerel olarak IE8'de açabileceğiniz bir kod ekledim.

— LeJared

IE9'da test edilmiş ve onaylanmıştır, iki farklı durum içermeyen olay.

— saeraphin

İçinde bir simge bulunan bir bağlantı vardı: daha önce dinlenme durumunda altı çizili OLMAMALIDIR, sonra fareyle üzerine gelindiğinde altı çizilir, ancak simgenin altı çizilmez. IE'yi bunu doğru yapmaya ikna etmek için yapmam gereken şey şudur: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (evet gerçekten, ilk altı çizili, ardından hiçbiri olmadan üzerine yazın) a: hover {text-decration: underline} a: hover: before {text-decoration: none}

— Sahte Haak

8

Öğeye aşağıdakileri ekleyerek yapabilirsiniz :before:

display: inline-block;
white-space: pre-wrap;

Alt display: inline-blockçizgi ile kaybolur. Ancak sorun, üçgenden sonraki boşluğun çökmesi ve gösterilmemesidir. Düzeltmek için white-space: pre-wrapveya kullanabilirsiniz white-space: pre.

Demo : http://jsfiddle.net/r42e5/9/

— Oriol
kaynak

1

pre-wrapİpucu için +1 . I kullanılarak edildi content:'►\a0'(\ a0 = & nbsp;)

— Hashbrown

1

Bağlantılarınızı aralıklarla sarın ve metin süslemesini a: fareyle üzerine gelin,

a:hover span {
   text-decoration:underline;
}

Kemanınızı yapmaya çalıştığınızı düşündüğüm şeye güncelledim. http://jsfiddle.net/r42e5/4/

— Memeler
kaynak

İyi bir fikir. Daha önce böyle yaptım. Sorun şu ki bu bağlantı bir cms sisteminde üretiliyor ve müşterilerimiz bunu zengin metin olarak kendileri dolduruyorlar.

— OptimusCrime

CMS hangi dildir? Bağlantıyı çıkarmasını ve ardından tarayıcıya göndermeden önce bir aralıkta sarmasını sağlayabilir mi?

— Ulumeme

Şirket modx kullanıyor. Sanırım bunu son bir çıkış yolu olarak yapabilirdim, ama bunu gerçekten geçersiz kılmak istedim. Sanırım bu mümkün değil. Yine de teşekkürler.

— OptimusCrime

-1

bunun yerine kullanmayı deneyin:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

olacak?

— Elen
kaynak

Bölümümde bazı paragraflar olabilir, bu yüzden bu işe yaramaz. İyi fikir tho.

— OptimusCrime

ilginçtir eğer kabul edilen cevap aynı şeyi gösteriyorsa ama farklı bir biçimde -1 koydu ...

— Elen

-4

bunu kullan

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

— Bipin Chandra Tripathi
kaynak

hiçbir şey yapmaz. metin dekorasyonu göz ardı edilir.

— OptimusCrime