Nasıl yazılır: a: before ve a: after?

347

Nasıl yazılır :hoverve :visitedkoşullandırılıra:before ?

Deniyorum a:before:hoverama çalışmıyor

— Jitendra Vyas
kaynak

488

Bu aslında ne yapmaya çalıştığınıza bağlıdır.

Sadece bir stiller uygulamak isterseniz :beforezaman sözde elemanı aeleman bir sözde sınıfı eşleşir sen yazma gereken a:hover:beforeveya a:visited:beforeyerine. Sözde elemanın sonra geldiğine dikkat edin sözde sınıfı (ve aslında, tüm seçicinin en sonunda). Ayrıca iki farklı şey olduğuna dikkat edin; Bu tür sözdizimi sorunlarıyla karşılaştığınızda ikisine de "sözde seçici" demeniz sizi şaşırtacaktır.

CSS3 yazıyorsanız, bu ayrımı daha net hale getirmek için çift sütunlu bir sözde öğeyi gösterebilirsiniz. Dolayısıyla a:hover::beforeve a:visited::before. Ancak IE8 ve daha eski tarayıcılar için eski tarayıcılar için geliştiriyorsanız, tek sütunları kullanmaktan kurtulabilirsiniz.

Sözde sınıflar ve sözde elemanları bu spesifik sırası belirtilmektedir spec :

Bir sözde eleman, bir seçicideki son basit seçicilerin dizisine eklenebilir.

Bir Basit seçiciler dizisi bir combinator ayrılmış değildir, basit seçiciler zinciridir. Her zaman bir tip seçici veya evrensel bir seçici ile başlar. Sekansta başka bir tip seçiciye veya evrensel seçiciye izin verilmez.

Bir basit seçici ya tür seçici, genel seçici, özelliği, seçici, sınıf seçici, kimlik seçici ya da psödo-sınıftır.

Yalancı sınıf basit bir seçicidir. Bununla birlikte, sahte bir öğe, basit bir seçiciye benzese bile değildir.

Ancak, :hover¹ gibi kullanıcı eylemi sözde sınıfları için , bu efektin yalnızca kullanıcı sözde öğenin kendisi ile etkileşime girdiği ancak öğeyle etkileşime girmesi durumunda uygulanması gerekiyorsa a, bu, mizanpaj düzenine bağımlı bazı geçici çözümlerden başka mümkün değildir. . Metinde ima edildiği gibi, standart CSS sözde elemanlarının şu anda sözde sınıfları olamaz. Bu durumda, :hoversözde öğe yerine gerçek bir alt öğeye başvurmanız gerekir .

¹ _{Elbette bu, :visitedsözde elemanlar bağlantı olmadığı için söz konusu gibi sözde sınıfları bağlamak için geçerli değildir.}

— BoltClock
kaynak

27

İmlecin ana öğeye yerleştirildiğine dikkat edilmelidir - bu, :: after pseudoelement, üst öğesi olduğu sürece farenin altında olmasa bile dekorasyonun uygulanmasına neden olur.

— SamGoody

6

Ayrıca , yerleşim kurallarının belirtilmesi nedeniyle buna yanıt vermeyen birkaç şey olduğu da belirtilmelidir - ör text-decoration.

— Chris Krycho

1

@Chris Krycho: Gerçekten de - aslında buradaki sözde unsurlarla ilgili bu özel konu hakkında bir açıklamam var . Tabii ki, sorunun kendisinin sözde sınıf / sözde öğe seçicileriyle bir bağlantısı olmadığını açıklamakta fayda var , ancak belirttiğiniz gibi bir düzen sorunu.

— BoltClock

@BoltClock O cevabı upvoted çok bu yorum yazılmıştır kısa bir süre sonra. Hurra.

— Chris Krycho

2

Sinlge iki nokta üst üste (:) sahte sınıfları ve çift iki nokta üst üste (: :) yalancı öğeleri belirtir. Bu yüzden: hover :: before

— mikkelbreum

107

a:hover::beforeBunun yerine yazın a::before:hover: örnek .

— sandeep
kaynak

2

@mikkelbreum bunu kanıtlamak için bir referansınız var mı?

— shea

3

@bungeshea: Bu CSS3 sözdizimidir. Cevabım altındaki yorumlara (yanı sıra son düzenlemem) bakın. CSS1 / 2 sözde öğeleri için hem tekli hem de çift kolonlara izin verildiğinden buna "doğru" sözdizimi demek biraz yanlıştır. Onu çağırır tavsiye edilen tek nedeni bugün IE8 destekleyen ve üzeri yaştaki kişiler için eski sözdizimi kullanmaya devam etmek, çünkü yerine sözdizimi.

— BoltClock

@mikkelbreum @sheabunge CSS2 :aftervs CSS3 hakkında daha fazla bilgi ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (single :daha iyi destek var)

— travis

alt çizgi için çalışmıyor :( jsfiddle.net/porzechowski/u5dhthvq Lütfen şunu da ekleyin: inline-block; jsfiddle.net/porzechowski/u89fo4oq

— plusz

7

Fareyle üzerine gelindiğinde menü bağlantısının metnini değiştirmek için. (Fareyle üzerine gelindiğinde farklı dil metni)

jsfiddle örneği

html:

<a align="center" href="#"><span>kannada</span></a>

css:

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}

— Rao
kaynak

1

Bu çok hoş bir cevap. Aslında, yayılma metninin yazı tipi boyutunu yedek metne uyacak şekilde 24 piksele artırarak kemancınızı biraz genişletmeme ilham verdi , aynı metnin aynı genişliğe sahip olması için değiştirme metninden önce ve sonra 3 kırılmaz boşluk ekledi ve tarz a:hover::beforeile text-decoration: underlineyedek metnin kırmızı rengi almaya altı çizili neden olan.

— Dave Land

4

Kullanmaya çalışın .card-listing:hover::after hoverve çalışınafter::

— subindas pm
kaynak

1

BoltClock'un cevabı doğru. Eklemek istediğim tek şey, yalnızca sözde öğeyi seçmek istiyorsanız, bir yayılma alanı koymaktır.

Örneğin:

<li><span data-icon='u'></span> List Element </li>

onun yerine:

<li> data-icon='u' List Element</li>

Bu şekilde basitçe söyleyebilirsin

ul [data-icon]:hover::before {color: #f7f7f7;}

li öğesinin tamamını değil, yalnızca sözde öğeyi vurgulayacak

— bbrinx
kaynak

-2

Ayrıca, bu kodda yaptığım gibi, sağ sivri braketi (">") kullanarak eyleminizi yalnızca bir sınıfa kısıtlayabilirsiniz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

Not: Fareyle üzerine gelindiğinde: anahtarı yalnızca .test1 sınıfında çalışır

— Stefan Gruenwald
kaynak