Pseudoelementy sú jedným z najpokročilejších selektorov, ktoré sú k dispozícii na použitie v CSS. Hlavným účelom týchto selektorov je vytvoriť jedinečný štýl bez zmeny dokumentu HTML, ktorý sa používa na vytvorenie základnej štruktúry danej webovej stránky.

Tu je príklad, ako používať pseudo prvky v CSS.

Bežné pseudoelementy

Existuje rozsiahly zoznam pseudoprvkov, ktoré sú k dispozícii na uľahčenie života webového vývojára. Niektoré z týchto pseudoprvkov zahŕňajú:

• Predtým
• Po
• Kulisa
• Prvá línia
• Prvé písmeno

V konkrétnych situáciách sa niektoré pseudoelementy ukážu ako vhodnejšie ako iné. Jediná vec, ktorá zostáva nemenná, je všeobecná štruktúra použitia ľubovoľného pseudoprvku.

Príklad štruktúry pseudoprvkov

selektor:: pseudoelement {
/ * css kód * /
} 

Aj keď môžeš použiť prvok HTML ako selektor, odporúča sa použiť triedu alebo ID, aby ste sa vyhli zacieleniu na nechcené prvky v rozložení. Prvok, štýl alebo údaje, ktoré chcete vložiť na požadované miesto, by mali byť umiestnené medzi zložené zátvorky.

Predchádzajúce a nasledujúce pseudo prvky sú najobľúbenejšie v zozname a vzhľadom na to, že existuje veľa praktických spôsobov ich použitia - nie je ťažké pochopiť prečo.

Používanie pseudoprvku Before in CSS

Aj keď to nie je nemožné, je ťažké prekryť obrázky čitateľným textom v CSS. Je to väčšinou preto, lebo obrázok a text by na webovej stránke zaujali rovnaké miesto.

Je to pomerne ľahké poslať obrázok na pozadie skupiny textu, ale ak je tento obrázok príliš jasný, má tendenciu premôcť text, ktorý je nad ním. V týchto prípadoch je ďalším krokom pokus o zníženie nepriehľadnosti obrazu pomocou vlastnosti nepriehľadnosti.

Jediným problémom je, že keďže obrázok a text zaujímajú rovnakú pozíciu, text sa tiež stane trochu priehľadným.

Jedným z mála účinných spôsobov riešenia tohto problému je použitie pseudoprvku before.

Použitie príkladu pred pseudoelementom

.landingPage {
/ * Usporiada text na prekrytí obrázka * /
displej: flex;
smer ohybu: stĺp;
justify-content: center;
align-items: center;
zarovnanie textu: na stred;
/ * nastaví stránku tak, aby sa prispôsobila rôznym veľkostiam obrazovky * /
výška: 100vh;
}
.landingPage:: pred {
obsah: '';
/ * importuje obrázok * /
pozadie: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
stred / obal bez opakovania;
/ * umiestni prekrytie na vrchnú časť obrázka * /
nepriehľadnosť: 0,4;
/ * zviditeľňuje obrázok * /
pozícia: absolútna;
hore: 0;
vľavo: 0;
šírka: 100%;
výška: 100%;
}

Vyššie uvedený kód je vytvorený na spoločné použitie s triedou HTML landingPage uvedenou nižšie. Ako je uvedené v kóde vyššie, pomocou pseudoprvku before môžeme zacieliť obraz a použiť na ňom vlastnosť opacity pred kombináciou obrázka s textom.

Použitie pseudoprvku Before


To je výsledok použitia pseudoprvku before
na prekrytie a obrázok s čitateľným textom.

To spôsobí, že sa na obrázok umiestni prekrytie a hore sa zobrazí jasný text, ako je to znázornené na obrázku nižšie:

Používanie after-elementu v CSS

Praktickým využitím pseudoprvku je pomoc pri vytváraní formulára HTML. Väčšina formulárov je vytvorená pomocou množiny polí, ktoré vyžadujú úspešné odoslanie údajov.

Jedným zo spôsobov, ako označiť, že pole vo formulári vyžaduje údaje, je vloženie hviezdičky za štítok tohto poľa. Následný pseudoelement poskytuje praktický spôsob, ako to dosiahnuť.

Použitie príkladu po pseudoelementu

.požadované:: po {
obsah: '*';
farba: červená;
} 

Vložením vyššie uvedeného kódu do sekcie CSS vo vašom formulári zabezpečíte, že za každým štítkom, ktorý obsahuje požadovanú triedu, bude priamo nasledovať červená hviezdička. Následný pseudoelement je v tomto príklade praktický aj preto, lebo pomáha oddeliť styling od štruktúry (čo je pri vývoji softvéru vždy ideálne).

Vlastníctvo obsahu

Ako je uvedené v príklade po pseudoprvku vyššie, vlastnosť obsahu je nástroj, ktorý sa používa na vloženie nového obsahu na webovú stránku. Táto vlastnosť sa používa iba s pseudoprvkami pred a za.

Je dôležité si uvedomiť, že aj keď nie je k dispozícii žiadny obsah, ktorý by sa dal priviesť do vlastnosti obsahu (napríklad v príklade pseudoprvku pred, vyššie), stále musíte používať vlastnosť obsahu v rámci parametrov pred alebo za pseudoprvkom, aby fungovali ako určené.

Teraz môžete v CSS používať pseudo prvky

V tomto článku ste sa naučili, ako identifikovať a používať pseudo prvky vo svojich programoch CSS. Boli ste oboznámení s pseudoprvkami pred a po a boli vám poskytnuté praktické spôsoby použitia oboch. Mali ste tiež možnosť vidieť, prečo je vlastnosť obsahu nevyhnutná pre úspešné použitie pseudoprvkov pred a po.

10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

Chcete sa dozvedieť viac o používaní CSS? Na začiatok vyskúšajte tieto základné príklady kódu CSS, ktoré potom môžete použiť na svoje vlastné webové stránky.

Prečítajte si Ďalej

O autorovi