CSS ::before-seudoelementti

Määritelmä ja käyttö

CSS ::before Sseudoelementtiä käytetään sisällön lisäämiseen määritellyn elementin sisällä ennen sitä.

Käyttö content Määrittää sisällytettävän sisällön. content-arvo voi olla:

• Merkkijono: content: "Hello world!";
• Kuva: content: url(myimage.jpg);
• Ei sisältöä: content: none;
• Laskuri: content: counter(li);
• Lauseen alku: content: open-quote;
• Ominaisuusarvo: content: " (" attr(href) ")";

Vinkki:Huomaa, että lisätty sisältö sijaitsee edelleen määritellyssä elementissä. Lisätty sisältö lisätään elementin sisäiseen sisältöön ennen muita sisältöjä.

Käyttö ::after Lisää sisältöä tietyn elementin sisällön jälkeen.

Esimerkki

Esimerkki 1

Lisää merkkijono jokaisen <p>-elementin sisällön eteen:

p::before {
  content: "Lue tämä: ";
}

Kokeile itse!

Esimerkki 2

Lisää merkkijono jokaisen <p>-elementin sisällön eteen ja määritä lisättävän sisällön tyyli:

p::before {
  content: "Lue tämä -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Kokeile itse!

CSS-kieli

::before {
  css lausunnot;
}

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat numerot määrittelevät ensimmäisen selaimen version, joka tukee täysin kyseistä sseudoelementtiä.

Liittyvät sivut

Oppitunti:CSS-seudoelementit

Viittaus:CSS ::after-seudoelementti