Ovoga puta pričaću o pseudo elementima (selektorima) i to ne o svim. Verovatno ste se sretali sa :after ili :before elementima koje se odnose na postojeće u nekim css fajlovima. Moj prvi susret je bio tipa: Uh Bog te, kako li ovo funkcioniše? Zapravo i nije toliko komplikovano ako znaš šta želiš da postigneš i  znaš css iole dobro.

Dobro, šta su to u stvari pseudo elementi? Samo ime im kaže. U pitanju su lažni elementi koji se postavljaju ispred ili iza elementa na koji se odnose. Reč pseudo je grčkog porekla i otprilike znači laž.

Malo o sintaksi.
Pseudo elementi zahtevaju klasu na koju će se odnositi. Dalje, moraju imati content objekat, bilo sa, bilo bez vrednosti. Recimo:

p:before {
   content: "-";
}

p:after {
   content: "!";
}

U ovom slučaju ispred svakog paragrafa će biti ispisana crtica, a iza znak uzvika. Kao što sam rekao, content mora biti prisutan pa makar i prazan: content:" ";.

Gde se ovo može upotrebiti? Recimo, konkretno ovaj slučaj kada želite da svaki paragraf počne sa (recimo) crticom a završi se sa (recimo) znakom uzvika. I opet recimo imate veliki broj paragrafa gde biste morali iskucati sve ovo za svaki. Na ovaj način možete stilizovati ogroman broj unosa. A ako vam svaki paragraf počinje sa rečima "Kako da", ove reči stavite u before pseudo element. Generalno, mogućnosti su velike pošto umesto slovnih i drugih znakova možete staviti i  putanje do slike. Evo šta kaže W3S.

Da li je samo to? Ne. Šta kažete za oblačić za tekst kakav imaju dugmad svih relevantnijih socijalnih mreža? Evo koda:

.bubble {
	position: relative;
	background: #ffffff;
	border: 1px solid #000000;
	border-radius:3px;
	width: 30px;
	margin-left: 30px;
	height:30px;
}
.bubble:after, .bubble:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.bubble:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 5px;
	top: 50%;
	margin-top: -5px;
}
.bubble:before {
	border-color: rgba(0, 0, 0, 0);
	border-right-color: #000000;
	border-width: 6px;
	top: 50%;
	margin-top: -6px;
}

Prvo smo napravili div kome smo dali dimenzije, oivičili i dali mali radijus. Margina sa leve strane je bitna da napravi mesta za strelicu. Pozicija je relativna. Zatim smo u oba pseudo elementa dali obavezan ali prazan content sa visinom i širinom nula. After element je zatim napravio trougao iste boje kao i border diva, a before je isti trougao popunio drugim trouglom iste boje kao i div ali malo u desnu stranu da bi stvorio efekat jedne te iste linije. U div se može ubaciti bilo šta.

Ako vam je to malo, možete pogledati šta se sve može uraditi sa css3 ovde.