CSS :before i :after

Svojstva CSS :before i :after su ono što se takođe naziva pseudo elementima. Koriste se za dodavanje nečega pre ili posle sadržaja elementa. Puno je sjajnih upotreba za ove pseudo elemente, a mi smo ovde da istražimo neke od njih.

Sintaksa

Ako imamo element kao ovaj:

<h2>welcome to our website</h2>

Mozemo dodati pseudo element pre korištenja CSS-a, ovako:

h2:before {
content: “Hello“;
color : blue;
}

Rezultat ce biti:

Ovo je prilično jednostavan princip. Dodajete sadržaj pre ili posle određenog elementa. To može biti od velike pomoći prilikom dodavanja ikonica, brisanja floats-ova i u mnogim drugim slučajevima.

Svojstvo sadržaja pseudo elementa može ostati prazno sa praznim navodnicima poput ovog content: “”. Na ovaj način pseudo element možete tretirati kao okvir bez sadržaja. Ako se svojstvo sadržaja potpuno ukloni, pseudo element neće raditi.

Dodavanje ikonica

Sigurno najpopularnije ubotreba before i after pseudo elementa je koričtenje istih za dodavanje ikonica. Mozemo dodati jednostavnu .png ikonicu.

Pogledajmo oznake.

HTML

<h2>Weather report</h2>

CSS

h2:before {
content: “ ”;display: block;
height: 15px;
width: 25px;
url: (‘images/icon.png’’);
margin-right: 5px;
}

Rezultat:

Sada imamo uspjesno dodatu ikonicu prije texta, Lako zar ne ?

Čičćenje(brisanje) float elementa

Nakon plutanja elemenata, treba dodati još jedan kako bi se taj plutajući uklonio. Možete izbeći dodavanje novog elementa i jednostavno koristeći pseudo.

Recimo da imamo ovu situaciju:

Mozemo uzeti sledeci kod da postignemo brisanje float-a.

HTML

<div class="box-container">
<div class=”box”></div>
<div class=”box”></div>
</div>
<p>Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-
to-table.</p>

CSS

.box-container:before,
.box-container:after {
content: "";
display: block;
}
.box-container:after {
clear: both;
}
.box {
height: 100px;
width: 100px;
background-color: #C98EED;
margin: 5px;
float: left;
}

Sada pogledajmo rezultat.

Koristeći ovu metodu očistili smo plutajući element i paragraf je pomeren ispod dva elementa.

Korištenje Slike Pozadine

Takođe možemo dodati i sliku pozadine u pseudo element. To je cesto koršteno kada se radi style hedera.

HTML

<h2>Hello World</h2>

CSS

h2:after {
content: “”;
width: 100%;
height: 30px;
background: url(‘underline.png’) center center no-repeat;
display: block;
}

Postignuti rezultat:

Podrška pretrazivača

Kao sa svim ostalim u CSS-u, treba proveriti podršku pretrazivača. Konsultacijom sa “CAN I USE” servisom, vidimo da ove pseudo klase imaju vecu podršku pretrazivača (preko 98%) i necemo imati glavobolje sa njihovim korištenjem.

Sažetak

Ovde smo objasnili osnovne principe CSS pseudo elemenata. Primjeri ilustruju samo neke od mnogih mogućih upotreba. Ne brinite ako na početku nije potpuno jasno. Malo prakse ide dužim putem.

Nadam se da će ovaj članak pomoći u budućim projektima. Hvala vam na čitanju!

Ako vam se svideo ovaj članak, pretplatite se na naš bilten za još sjajnih sadržaja!