Pseudoelementy jsou jedním z pokročilejších selektorů, které jsou k dispozici pro použití v CSS. Hlavním účelem těchto selektorů je vytvořit jedinečný styl, aniž by došlo ke změně dokumentu HTML, který se používá k vytvoření základní struktury dané webové stránky.

Zde je návod, jak používat pseudo-prvky v CSS.

Běžné pseudoprvky

K dispozici je rozsáhlý seznam pseudoprvků, které usnadňují život vývojáři webu. Některé z těchto pseudoprvků zahrnují:

• Před
• Po
• Pozadí
• První řada
• První dopis

Ve specifických situacích se některé pseudo-prvky ukáží jako vhodnější než jiné, ale jedna věc, která zůstává konstantní, je obecná struktura pro použití jakéhokoli pseudo-prvku.

Příklad struktury pseudoprvků

selector:: pseudo-element {
/ * css kód * /
} 

I když můžete použít prvek HTML jako selektor, doporučujeme použít třídu nebo ID, abyste se vyhnuli cílení na nezamýšlené prvky ve vašem rozložení. Prvek, styl nebo data, která chcete vložit na požadované místo, by měla být umístěna mezi složené závorky.

Před a po pseudoprvcích jsou v seznamu nejoblíbenější a vzhledem k tomu, že existuje mnoho praktických způsobů, jak je použít - není těžké pochopit proč.

Používání pseudoprvku Before in CSS

Ačkoli to není nemožné, je obtížné překrýt obrázky s čitelným textem v CSS. Důvodem je většinou to, že obrázek a text by zaujímaly stejnou pozici na webové stránce.

Je to relativně snadné odeslat obrázek na pozadí skupiny textu, ale když je ten obrázek příliš jasný, má tendenci přemoci text, který je nad ním. V těchto případech je dalším krokem pokus o vytvoření méně neprůhledného obrazu pomocí vlastnosti krytí.

Jediným problémem je, že jelikož obrázek a text zaujímají stejnou pozici, text se také stane poněkud průhledným.

Jedním z mála účinných způsobů řešení tohoto problému je použití pseudoprvku before.

Použití příkladu před pseudoelementem

.landingPage {
/ * Uspořádá text na překryvném obrázku * /
displej: flex;
směr flexu: sloupec;
justify-content: center;
align-items: center;
zarovnání textu: na střed;
/ * nastaví stránku tak, aby se přizpůsobila různým velikostem obrazovky * /
výška: 100vh;
}
.landingPage:: před {
obsah:'';
/ * importuje obrázek * /
pozadí: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
střed / obal bez opakování;
/ * umístí vrstvu na horní část obrázku * /
neprůhlednost: 0,4;
/ * zviditelní obrázek * /
pozice: absolutní;
nahoře: 0;
vlevo: 0;
šířka: 100%;
výška: 100%;
}

Výše uvedený kód je vytvořen pro jedno použití s ​​třídou HTML landingPage níže. Jak je znázorněno v kódu výše, pomocí pseudoprvku before můžeme cílit na obrázek a použít na něj vlastnost opacity, než se obrázek zkombinuje s textem.

Použití pseudoprvku Before


To je výsledek použití pseudoprvku before
překrýt a obrázek čitelným textem.

To způsobí, že se na obrázek umístí překrytí a nahoře se zobrazí jasný text, jak je znázorněno na obrázku níže:

Použití After Pseudo-elementu v CSS

Praktickým využitím pseudoprvku je pomoc při vytváření formuláře HTML. Většina formulářů je vytvořena pomocí sady polí, která vyžadují úspěšné odeslání dat.

Jedním ze způsobů, jak označit, že pole ve formuláři vyžaduje data, je umístění hvězdičky za štítek pro toto pole. After pseudoelement poskytuje praktický způsob, jak toho dosáhnout.

Použití příkladu po pseudoelementu

.požadováno:: po {
obsah: '*';
červená barva;
} 

Vložením výše uvedeného kódu do části CSS formuláře zajistíte, že za každým štítkem, který obsahuje požadovanou třídu, bude přímo následovat červená hvězdička. V tomto příkladu je praktický pseudoelement také praktický, protože pomáhá oddělit styling od struktury (což je při vývoji softwaru vždy ideální).

Vlastnost obsahu

Jak je ukázáno v příkladu po pseudoelementu výše, vlastnost content je nástroj, který se používá k vložení nového obsahu na webovou stránku. Tato vlastnost se používá pouze s pseudoelementy před a po.

Je důležité si uvědomit, že i když není k dispozici žádný obsah ke krmení do vlastnosti obsahu (například v předchozím příkladu pseudoprvku) výše), stále musíte používat vlastnost content v parametrech před nebo po pseudoelementu, aby fungovaly jako zamýšlený.

Nyní můžete v CSS používat pseudo prvky

V tomto článku jste se naučili identifikovat a používat pseudoprvky ve svých programech CSS. Byli jste seznámeni s pseudoelementy před a po a dostali jste praktické způsoby, jak používat oba. Také jste byli schopni zjistit, proč je vlastnost obsahu nezbytná pro úspěšné použití pseudoprvků před a po.

10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minut

Chcete vědět více o používání CSS? Vyzkoušejte nejprve tyto základní příklady kódu CSS a poté je použijte na své vlastní webové stránky.

Přečtěte si další

O autorovi