Podgląd live : http://baczyna-tkaczy.tk/ .

Witam, proszę zwrócić uwagę na dolny panel. Chciałem zrobić aby po wybraniu danej opcji zmieniał się nad nią kolor tego prostokącika. Zrobiłem znacznik <p> i następnie przypisałem mu te pseudoelementy , jak możecie zauważyć ten duży prostokąt (żółty) mogę za pomocą marginesów ustawić w odpowiednim miejscu, natomiast ten mały czerwony nie mogę już ustawić bo reszta też się przesuwa. Jaka jest dla tego alternatywa, bądź jak to poprawnie wykonać ?

Co to pseudoelementy i o co Ci chodzi?
Wyjaśnij jakoś lepiej

odsyłam : http://blog.eduweb.pl/pseudo-elementy-before-i-after-w-css/

Który kolor konkretnie, żółty czy czarny?
Po co to rozdzielasz na dwa odrębne divy (paski i teksty)?

A jak mam to zrobic za pomoca jednego elementu ? I o co dokladnie pytasz z tymi kolorami.

Pytam, który kolor chcesz zmienić w razie aktywności opcji.
Być może precyzyjnie opisałeś problem, ale kod jest mało precyzyjny.

narazie chiałbym, zeby ten czerwony prostakacik, znajdowalsie dokladnie na szarym prostokacie obok 2px zoltego

Pseudoelementy jak każde inne można pozycjonować.