A Pseudo-Elem megértése előtt és után

A Cascading Style Sheet (CSS) elsősorban a HTML-jelölés stílusainak alkalmazására szolgál, de bizonyos esetekben, amikor extra jelölés hozzáadása a dokumentumhoz felesleges vagy nem lehetséges, a CSS-ben valójában van egy funkció, amely lehetővé teszi, hogy extra jelölést adjunk hozzá anélkül, hogy megzavarnánk a tényleges dokumentum, nevezetesen a pszeudo-elemek.

Hallottátok ezt a kifejezést, különösen akkor, ha követett néhány oktatóanyagot.

Valójában néhány CSS családtag van besorolva pszeudo-elemek mint például a :első sor, :első levél, ::kiválasztás, :előtt és :után. De ebben a cikkben csak a :előtt és :után, “pszeudo-elemek” itt kifejezetten mindkettőre utal. Az alapokból megvizsgáljuk ezt a témát.

A szintaxis és a böngésző támogatása

A pszeudo-elemek már azóta körbejártak CSS1, de a :előtt és :után amiről itt beszélünk, megjelentek CSS2.1. Kezdetben a pszeudo-elemek a szintaxishoz használjon egyszeres kettőspontot, majd a web alakult ki a CSS3 the pszeudo-elemek felülvizsgálták, hogy kettős kettőspontot használjanak ::előtt & ::után - megkülönböztetni pszeudo-osztályok (azaz. :lebeg, :aktív, stb).

Mindazonáltal, hogy az egykolonás vagy a kettős kettőspont formátumot használja-e, a böngészők még mindig felismerik. És mivel az Internet Explorer 8 csak az egykolonás formátumot támogatja, biztonságosabb az egykettő használata, ha szélesebb böngésző kompatibilitást szeretne.

Mit csinal?

Röviden, a pszeudo-elemek egy extra elemet helyez be előtt vagy után a tartalom elemét, így ha mindkettőt hozzáadjuk, azok technikailag egyenlőek, a következő jelöléssel.

:előtt Ez a fő tartalom. :után

Ezeket az elemeket azonban a dokumentumon nem generálják. Még mindig láthatóak a felszínen, de nem találják meg őket a dokumentumforráson, így gyakorlatilag beszélnek hamisítvány elemek.

Pszeudo-elemek használata

használata pszeudo-elemek viszonylag könnyű; a következő szintaxist választó: mielőtt hozzáad egy elemet előtt a szintaxis során a tartalomválasztó választó: miután majd hozzáadja a tartalmat, és hozzáad egy tartalmat belsejében tartalom ingatlan.

Az alábbi részlet például idézőjelet ad hozzá a blockquote.

 blockquote: előtt tartalom: nyílt idézet;  blockquote: után content: close-quote;

Pszeudo-elemek formázása

Annak ellenére, hogy hamis elem, a pszeudo-elemek valójában úgy viselkedik, mint egy “igazi” elem; hozzá tudunk adni bármilyen stílusstílus-nyilatkozatot, például a szín megváltoztatását, a háttér hozzáadását, a betűméret beállítását, a szöveg belsejében való illesztését és így tovább.

 blockquote: előtt tartalom: nyílt idézet; betűméret: 24pt; szöveg-igazítás: központ; vonalmagasság: 42px; szín: #fff; háttér: #ddd; balra lebeg; pozíció: relatív; top: 30px;  blockquote: után content: close-quote; betűméret: 24pt; szöveg-igazítás: központ; vonalmagasság: 42px; szín: #fff; háttér: #ddd; úszó: jobb; pozíció: relatív; alsó: 40px;

A méret meghatározása

A generált elemek alapértelmezés szerint egy inline-szintű elem, így amikor a magasságot és a szélességet határozzuk meg, először blokkelemként kell definiálnunk a kijelző: blokk nyilatkozat.

 blockquote: előtt tartalom: nyílt idézet; betűméret: 24pt; szöveg-igazítás: központ; vonalmagasság: 42px; szín: #fff; háttér: #ddd; balra lebeg; pozíció: relatív; top: 30px; határ-sugár: 25px; / ** definiálja blokkelemként ** / kijelző: blokk; magasság: 25px; szélesség: 25px;  blockquote: után content: close-quote; betűméret: 24pt; szöveg-igazítás: központ; vonalmagasság: 42px; szín: #fff; háttér: #ddd; úszó: jobb; pozíció: relatív; alsó: 40px; határ-sugár: 25px; / ** definiálja blokkelemként ** / kijelző: blokk; magasság: 25px; szélesség: 25px;

Csatolja a háttérképet

Azt is helyettesíthetjük a tartalmat, mint egy egyszerű szöveget. Habár a tartalom tulajdonsága a url () karakterlánc, amelybe beilleszt egy képet, de a legtöbb esetben sokkal inkább a háttér a hozzátartozó kép nagyobb ellenőrzéséhez.

 blokkjegy: tartalom: "" előtt; betűméret: 24pt; szöveg-igazítás: központ; vonalmagasság: 42px; szín: #fff; balra lebeg; pozíció: relatív; top: 30px; határ-sugár: 25px; háttér: url (images / quotationmark.png) -3px -3px #ddd; kijelző: blokk; magasság: 25px; szélesség: 25px;  blockquote: content: "után; betűméret: 24pt; szöveg-igazítás: központ; vonalmagasság: 42px; szín: #fff; úszó: jobb; pozíció: relatív; alsó: 40px; határ-sugár: 25px; háttér: url (images / quotationmark.png) -1px -32px #ddd; kijelző: blokk; magasság: 25px; szélesség: 25px;

Amint azonban a fenti részletből látható, még mindig kijelentjük, hogy tartalom tulajdonság és ezúttal egy üres karakterlánc. A tartalom tulajdonság követelmény és mindig alkalmazandó; különben a pszeudoelem nem fog működni akármi.

Pszeudo-osztályokkal kombinálva

Bár másfajta ál, tudjuk használni pszeudo-osztályok együtt pszeudo-elemek együtt egy CSS szabályban, ha szeretnénk a idézőjel háttér egy kicsit sötétebb, ha a fölött lebegünk blockquote.

 blockquote: hover: after, blockquote: hover: előtt háttérszín: # 555;

Átmeneti hatás hozzáadása

És azt is alkalmazhatjuk átmenet kecses színátmeneti hatás létrehozásához.

 átmenet: mind a 350ms; -o-átmenet: mind a 350ms; -moz-átmenet: mind a 350ms; -webkit-átmenet: mind a 350ms;

Sajnos azonban az átmeneti hatás úgy tűnik, csak a Firefox legújabb verziójában működik. Remélhetőleg több böngésző fog felkapni, hogy lehetővé tegye az átmeneti tulajdonságok alkalmazását pszeudo-elemek a jövőben.

Demó
Letöltés forrása

További inspiráció

Ösztönözni, három hűvös példát választottunk ki, amelyek ötleteket adhatnak Önnek a web designhoz.

Lenyűgöző árnyékok

Ebben a bemutatóban Paul Underwood elmagyarázta, hogyan lehet létrehozni egy reálisabb és lenyűgözőbb árnyékhatást :előtt és :után pszeudo-elemek. Mindkettő teljesen el van helyezve, és a hátsó részre van helyezve negatív z-index érték.

Halmozott képhatás

Használni a pszeudo-elemek az is lehetséges, hogy csak egy képpel hozza létre a piszkos halmozott képhatást. A pszeudo-elemek a tényleges kép hátulján lévő halmozott képek illúziójának létrehozására szolgál negatív módon z-index.

Következtetés

Pseudo-elemek egyszerűen “menő” és végül felhasználható, alapvetően van két bónusz elem minden hozzáadott elemhez, anélkül, hogy egyáltalán megzavarnánk a tényleges HTML struktúrát, majd majdnem mindent el tudunk képzelni.

Valójában van némi javulás pszeudo-elemek amely jelenleg dolgozik, például fészkelő pszeudoelemek div :: előtt :: előtt content: "; és több pszeudo-elem div :: korábban (3) tartalom: "; amely nyilvánvalóan sokkal több lehetőséget fog nyitni a webes tervezési gyakorlatban a jövőben. Miközben a jelenlegi böngészőkben végrehajtják őket, várjunk türelmesen.