Vzhled

Pseudoelementy

Ozdoby, které v HTML vůbec nejsou. CSS je vloží před obsah prvku nebo za něj.

Vyzdobíme krátký článek: linka nad nadpisem, hvězdička u povinného pole, velká uvozovka a šipka u odkazu ven. V náhledu vidíte, kam se dostaneme.

Začátek

Článek bez ozdob

Nadpis, seznam, citace, odstavec s odkazem a formulářové pole. Všechno funkční, ale strohé.

Pseudoelement se píše se dvěma dvojtečkami: ::before. Pseudotřída s jednou: :hover.

Pseudoelement · 1

Před obsahem ::before

Nad nadpis přidáme krátkou červenou linku. V HTML pro ni žádný element nemáme, vytvoří ji CSS.

Bez content se pseudoelement vůbec nezobrazí. Pro čistou ozdobu stačí prázdné uvozovky. Je inline, proto display: block, aby mohl mít šířku a výšku.

Pseudoelement · 2

Za obsahem ::after

Za popisek povinného pole přidáme červenou hvězdičku. Stačí jedno pravidlo a hvězdička bude u každého pole s třídou required.

Text v content screen readery často nepřečtou a nejde označit myší. Patří tam jen ozdoby, nikdy důležitý obsah.

Pseudoelement · 3

Odrážky ::marker

Odrážka seznamu je také pseudoelement. Obarvíme ji akcentovou barvou, text položek zůstane černý.

::marker umí jen pár vlastností: barvu, velikost a písmo. Úplně vlastní značku nastavíte přes list-style-type: "✓ " na seznamu.

Pseudoelement · 4

Velká uvozovka

Citaci ozdobíme velkou uvozovkou vlevo. Pseudoelement umístíme absolutně, citace mu bude kotvou a uděláme mu vlevo místo.

Spojení relative a absolute znáte z lekce Pozicování. S pseudoelementy se používá pořád.

Pseudoelement · 5

Šipka u odkazu ven

Odkazy na jiné weby označíme šipkou. Vybereme je selektorem atributu: každý odkaz, jehož href začíná na http.

Selektory atributů jsou v lekci Selektory. Pseudoelement se dá přidat za jakýkoli selektor.

Responzivita

Na telefonu menší uvozovka

Padding 56 px kvůli uvozovce bere na úzkém displeji citaci skoro pětinu šířky. Na mobilu uvozovku zmenšíme a padding zúžíme.

Pseudoelementy se do @media píšou úplně stejně jako ostatní selektory.

Shrnutí

Ozdoby bez dalšího HTML

Ano

• ::before a ::after vždy s content
• ozdoby: linky, ikonky, uvozovky, hvězdičky
• ::marker pro barvu odrážek
• position: absolute pro přesné umístění

Ne

• důležitý text v content
• prázdné div v HTML jen kvůli ozdobě

Další lekce: Transformace →