CSS ::after tekoelementti

Määritelmä ja käyttö

CSS ::after Tekoelementit käytetään sisällön lisäämiseen määritellyn elementin jälkeen.

Käytä content Ominaisuus määrittelee lisättävän sisällön. content -arvon voi olla:

• Merkkijono: content: "Hello world!";
• Kuva: content: url(myimage.jpg);
• Ei sisältöä: content: none;
• Laskuri: content: counter(li);
• Lauseenloppu: content: close-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ään sisään sisään olevaan sisältöön.

Käytä ::before Lisää sisältöä tietyn elementin sisällön eteen.

Esimerkki

Esimerkki 1

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

p::after {
  content: " - Muista tämä";
}

Kokeile itse!

Esimerkki 2

Lisää merkkijono jokaisen <p> -elementin sisällön jälkeen ja aseta lisättävän sisällön tyyli:

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

Kokeile itse!

CSS syntaksi

::after {
  css lausunnot;
}

Tekninen yksityiskohta

Selaimen tuki

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

Liittyvät sivut

Oppitunti:CSS tekoelementit

Viittaus:CSS ::before tekoelementti