Jak používat před a po pseudoelementech v CSS

Jak používat před a po pseudoelementech v CSS

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 bez změny dokumentu HTML, který se používá k vytvoření základní struktury dané webové stránky.





Zde je návod, jak používat pseudoelementy v CSS.



výjimka systémového vlákna není zpracována aktualizace systému Windows 10

Běžné pseudoelementy

Existuje rozsáhlý seznam pseudoprvků, které jsou k dispozici, aby usnadnily život webového vývojáře. Některé z těchto pseudoprvků zahrnují:





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

V konkrétních situacích se některé pseudoprvky ukáží jako vhodnější než jiné, ale jedna věc, která zůstává konstantní, je obecná struktura pro použití jakéhokoli pseudoprvku.

Příklad struktury pseudoelementů


selector::pseudo-element{
/* css code */
}

Ačkoli můžete použít prvek HTML jako selektor, doporučujeme použít třídu nebo ID, abyste se vyhnuli cílení na nechtěné prvky ve vašem rozložení. Prvek, styl nebo data, která byste chtěli vložit na požadované místo, byste měli umístit mezi složené závorky.



Pseudoelementy před a po 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žití prvku Před pseudo v 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 zaujímají na webové stránce stejnou pozici.



Je to relativně snadné poslat obrázek na pozadí skupiny textu , ale když je ten obrázek příliš jasný, má tendenci zahltit text, který je na něm. V těchto případech je dalším krokem pokus o zmenšení neprůhlednosti obrazu pomocí vlastnosti opacity.

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



Jedním z mála účinných způsobů, jak tento problém vyřešit, je použití pseudoprvku before.

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


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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





This is the result of using the before pseudo-element
to overlay and image with readable text.


Výsledkem bude umístění překryvné vrstvy na obrázek a čistý text nahoře, jak je znázorněno na obrázku níže:

Použití After Pseudo-elementu v CSS

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

Jedním ze způsobů, jak naznačit, že pole ve formuláři vyžaduje data, je umístit hvězdičku za štítek tohoto pole. After-pseudo-element poskytuje praktický způsob, jak to udělat.

Použití příkladu po pseudoprvku


.required::after{
content: '*';
color: red;
}

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

kde mohu tisknout věci poblíž mě?

Vlastnost obsahu

Jak je ukázáno v příkladu pseudoprvku po 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, který by bylo možné přenést do vlastnosti content (jako 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 pseudoelement, aby je mohl pracovat tak, jak měl.

Nyní můžete v CSS používat pseudoelementy

V tomto článku jste se dozvěděli, jak identifikovat a používat pseudo prvky ve vašich programech CSS. Seznámili jste se s pseudoelementy před a po a dostali jste praktické způsoby, jak je používat. Také jste viděli, proč je vlastnost content nezbytná pro úspěšné použití pseudoprvků před a po.

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

Potřebujete pomoc s CSS? Nejprve zkuste tyto základní příklady kódu CSS a poté je použijte na své vlastní webové stránky.

Číst dále Související témata
  • Programování
  • Webový design
  • CSS
O autorovi Kadeisha Kean(21 článků zveřejněno)

Kadeisha Kean je vývojář softwaru a technický/technologický spisovatel v plném zásobníku. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; produkující materiál, kterému každý technologický nováček snadno porozumí. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).

Více od Kadeisha Kean

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru