Gorące pytanie odnośnie przeudoelementów oraz transition.

Question

Witam serdecznie, zastanawiam się nad sposobem wykorzystania pseudoelementów. Wiele osób wykorzystuje właśnie :before nie po to aby dodać zawartość. Ale np. żeby uzyskać jakiś efekt animacji.

Więc pytanie czy ten pseudoelement tworzy jakby "element" w postaci kolejnego niewidzialnego pojemnika na którym można pracować - coś jak odnosilibyśmy się zupełnie do innego elementu? Np. wiele osób tworzy animacje, na podstawie :befor, :after - i pytanie dlaczego, skoro mógłby pracować na zwykłym elemencie, skoro dodają w content "", więc jakby nie tworzą nic. Jakie inne reguły posiada w takim razie pseudoelement, których nie można dodać do normalnego elementu po id, czy klasie?

Answer 1

http://www.kurshtml.edu.pl/css/po,pseudoelementy.html

<style>

#poo{ 
	width:200px;
	-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
	background:red;
	height:200px;
}
#poo:after{
	content: 'Tekst1';
}
#poo:before{ 
	content: 'Tekst2';
}
#poo:hover{
	width:300px;
}

</style>

<div id="poo">
    Regular el (animates ok)
</div>

Poczytaj przede wszystkim o pseudoelementach, bo chyba niewiele wiesz. Gdy użyjesz :after, coś wystąpi po, a jak użyjesz :before coś wystąpi przed. Możesz też określić dla tego np. tekstu kolor czcionki jej font itp. Możesz np. dać obrazek dla contentu.

Obowiązkowa lektura dla ciebie:

- https://www.w3.org/wiki/CSS/Properties/content

- https://css-tricks.com/css-content/

http://stackoverflow.com/questions/11173991/content-attribute-of-img-elements

Dużo by pisać i pisać, ale jest na ten temat wystarczająco dużo poradników, poczytaj!!