CSS de la A la Z: elemente grafice cu ajutorul pseudoelementelor :before și :after


Cine ar fi crezut că poți face inimi și forme stil ying-yang numai din CSS si ceva elemente HTML? Dar se poate: inimi, Pac Man, semnul infinitului și Ying-Yang se pot face relativ ușor. CSS este foarte flexibil atunci când știi ce să faci cu el.

Este clar că :before și :after, unele dintre cele mai utilizate pseudoelemente (pe lângă :first-line, :first-letter, :selection), nu pot fi întâlnite în fiecare pagină web de pe net, dar ele îți oferă o flexibilitate mare pentru că poți specifica diferite tipuri de conținut în ele și le poți stiliza în CSS după placul tău.

Cum stilizezi pseudoelementele în CSS? Cam așa:
div:before, div:after {
content: “…”;
float: left;
width: 35px;
height: 35px;
}

Codul de mai sus va pune trei puncte “…” înainte și după fiecare DIV din document.

În secțiunea de content: “” a celor două pseudoelemente poți pune:
– o imagine-> content: url(imagine.png);
– un text aleatoriu -> content: “text aici”;
– diferite atribute ale elementului HTML, ex url-ul din -> content:attr(href)
– combinație de tipuri de conținut-> content: “text – ” attr(href);
– sau poți crea un sistem de numerotare cu puncte și subpuncte->
h2 { counter-increment: section; }
ul { counter-reset: item; }
li { counter-increment: item; }

h2:before {
content: counter(section) ” – “;
}
li:before {
content: counter(section) “.” counter(item);
}

Mai multe informații și detalii pot fi citite pe site-ul A to Z CSS.

Căteva linkuri foarte utile:
1. Învață să targetezi elemente cu selectori avansați citind despre Advanced CSS selector.

Vei putea targeta, de exemplu, toate linkurile din pagină care conțin cuvântul “test” în atributul href:
a[href*=”test”] {
color: red;
}

Toate linkurie din pagină de forma:
/page-test/
/test-page/
/mytest-page/
vor avea culoarea roșie.

2. Folosește o sintaxă CSS sănătoasă care să respecte ceva reguli de bază cu CSS Guidelines.

3. Respectă reguli de sintaxă când scrii cod javascript. Citește despre aceasta aici.

Comments are closed.