Pseudo-elementy ::before a ::after jsou v CSS používány k přidání obsahu před nebo za vybraný element bez nutnosti změny HTML dokumentu. Tyto pseudo-elementy mohou být velmi užitečné pro dekorativní účely, jakými jsou ozdoby, ikony nebo dokonce malé textové doplnění. Avšak, existují situace, kdy se zdá, že ::before a ::after "nezobrazují" svůj obsah. Tento článek se pokusí odborně prozkoumat některé z nejběžnějších příčin tohoto chování.
1. Chybějící nebo nesprávně definovaný obsah
Nejzákladnější požadavek pro zobrazení ::before a ::after pseudo-elementů je definice vlastnosti content. Pokud je tato vlastnost vynechána nebo je její hodnota nesprávná, pseudo-element se nezobrazí.
.selektor::before {
content: " ";
/* další styly */
}
2. Display a Visibility
Pseudo-elementy jsou implicitně nastaveny na display: inline;, což znamená, že pokud jejich obsah vyžaduje jiný typ zobrazení (např. block nebo flex), je nutné to explicitně definovat. Také, pokud je na elementu nastavena vlastnost visibility: hidden;, bude skryt i obsah pseudo-elementů.
.selektor::before {
content: "Příklad";
display: block; /* Explicitní definice display */
}
3. Specifičnost a dědičnost CSS
Dalším důvodem, proč se může zdát, že pseudo-elementy nezobrazují obsah, je konflikt specifičnosti nebo chyba v dědičnosti stylů. CSS pravidla s vyšší specifičností mohou přepsat styl pseudo-elementů, pokud nejsou správně cílená.
4. Omezení velikosti a pozicionování
Pokud pseudo-elementům chybí explicitní rozměry nebo jsou špatně pozicovány, mohou být vizuálně "mimo" zobrazenou oblast a zdát se neviditelné.
.selektor::before {
content: "•";
position: absolute;
left: 0;
top: -10px; /* Může být mimo zobrazenou oblast */
}
5. Kompatibilita prohlížeče
I když moderní prohlížeče mají obecně dobrou podporu pro ::before a ::after, existují specifické výjimky nebo chyby, které mohou způsobit, že se pseudo-elementy nezobrazí správně. Je důležité testovat web ve více prohlížečích a verzích, aby se zajistila kompatibilita.
Pseudo-elementy ::before a ::after jsou silné nástroje pro webdesignéry, ale vyžadují pozornost k detailům a správnou implementaci. Většina problémů se zobrazováním těchto pseudo-elementů může být vyřešena kontrolou výše uvedených oblastí - od správné definice obsahu, přes nastavení display a visibility, až po zajištění správného pozicionování a velikosti. Pochopením těchto základů může být využití ::before a ::after efektivním a flexibilním nástrojem pro obohacení uživatelského rozhraní bez nutnosti zásahů do struktury HTML.
