:after si :before

:before si :after sunt chemari pseudo-elemente. Ce fac ele? Iti permite sa adaugi "chestii" pe o etichetă, lucruri care pot fi proprietati CSS sau de conţinut de orice fel. Se poate argumenta ca, unei etichete se adauga alte doua etichete, una înainte (before) şi alta după (after). Aceste elemente nu au prea multe restricţii şi pot fi aplicate la orice etichetă.

Funcţiona pe orice browser relativ moderne, inclusiv Internet Explorer 8, Firefox, Chrome, Opera, Safari. Se poate folosi orice proprietate şi una in particular care ne permite să adăugaţi conţinut. Practic, acest conţinut poate fi atât un text şi adresa URL a unei imagini.

Sa vedem primul exmplu, aplicarea pseudo-elemenelor la un text:

Phasellus neque massa, mollis eu venenatis vitae, sodales vel quam. Aenean vitae nulla ipsum, ac malesuada felis. Morbi semper laoreet adipiscing. Nam adipiscing lacinia eros at mattis.

codul CSS, se adauga inaintea liniei: </head>

<style>
div.demoAB2 {
background-color: #000;
border: 1px solid #456;
color: #FFF;
font-family: Verdana;
margin: 0 auto;
padding: 20px 10px;
position: relative;
text-align: center;
width: 400px;
}
div.demoAB2:before {
background-color: #000;
border: 2px solid #456;
border-radius: 8px;
content: url(URL_IMAGINE);
padding: 5px 10px 2px;
position: absolute;
right: 20px;
top: -15px;
}
div.demoAB2:after {
bottom: 35px;
content: "este es el :after";
font-family: Helvetica;
font-size: 20px;
position: absolute;
right: -65px;
width: 55px;
}
</style>

Inlocuieste URL_IMAGINE cu imaginea ce doresi sa apara desupra textului, salvezi modificarile,si acum intr-o postare noua se adauga:

<div class="demoAB2">
Phasellus neque massa, mollis eu venenatis vitae, sodales vel quam. Aenean vitae nulla ipsum, ac malesuada felis. Morbi semper laoreet adipiscing. Nam adipiscing lacinia eros at mattis. </div>

Exmplul doi cu o imagine:

cod CSS:

<style>
div.demoAB4 {
cursor: pointer;
position: relative;
text-align: center;
}
div.demoAB4:before {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0 0 10px #A0A9B1 inset;
content: "ACEASTA ESTE O IMAGINE";
font-family: Tahoma;
font-size: 32px;
height: 48px;
line-height: 48px;
opacity: 0;
padding: 0 10px;
position: absolute;
right: 50px;
top: 20px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
div.demoAB4:hover:before {
right: 160px;
opacity: 1;
top: 140px;
}
div.demoAB4 img {
width: 400px;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
div.demoAB4 img:hover {
width: 500px;
}
div.demoAB4:after {
content: "efect mouseover";
display: block;
font-weight: bold;
font-family: Helvetica;
font-size: 20px;
text-align: center;
}
</style>

Se adauga intr-o noua postare:

<div class="demoAB4">
<img src="URL_IMAGINE" /></div>

---