#1 Pseudo-element
Pseudo-element je speciální část prvku, která není přes HTML přístupná. Jedná se o místo před a za prvkem nebo pomocí ní lze také stylovat první písmeno nebo větu textu.
Pseudo-element se v CSS přidává v ihned za prvek, na který chceme daný stav aplikovat, a za který se vloží dvě dvojtečky ::. Vypadá to teda takto:
p::before {
/* Stylizace */
}
#2 Seznam
::before a ::after
Pseudo-element ::before se používá k vyplnění prostoru, který se nachází před prvkem, pseudo-element ::after naopak vyplňuje prostor za prvkem.
Tradičně se jedná například o nějakou formu obrázku nebo se pomocí něj vytváří efekt postupného stmívání. V následujícím příkladu se před každý prvek <a> přidá obrázek s ikonou odkazu a za každý prvek s třídou .flower se přidá květina.
a::before {
content: url('img/link.png');
}
.flower::after {
content: url('kvetina.jpeg');
}
::selection
Pomocí pseudo-elementu ::selection lze aplikovat vlastní styl na cokoli, co je označeno uživatelem. Často se používá pro stylování označeného textu, aby barva výběru seděla se stránkou a výběr tak nepřidával další barvu, která do barevného schématu stránky nepatří. Pro pseudo-element lze aplikovat tyto CSS vlastnosti – background-color, color, cursor a outline.
::selection {
background-color: black;
color: white;
}
::first-line a ::first-letter
Pseudo-elementy ::first-line a ::first-letter přistupují k první lince nebo k prvnímu písmenu v textu. Pseudo-element ::first-letter se podobně jako v knížkách využívá k zvýraznění nového odstavce, podobně je na tom i ::first-line
p {
font-size: 20px;
}
p::first-letter {
font-size: 200%;
}
V tomto příkladu mají odstavce textu <p> základní velikost písma 20px, přičemž první písmeno (vybrané pomocí ::first-letter) bude mít dvojnásobnou velikost (v tomto případě 40px)
::marker
Pseudo-element ::marker vybírá odrážky v seznamech. Díky tomuto pseudo-elementu lze tak odrážky barvit, zvětšovat nebo k nim přidávat další obsah. Podobně jako u ::selection, často se aplikuje sám bez specifikace prvku.
/* Změna barvy jakékoliv odrážky na modrou */
::marker {
color: blue;
}