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.