Jak zmienić kolor punktu wypunktowanej listy na stronie internetowej!

Zmiana koloru wypunktowania (kropki, punktatory, punktora) listy stworzonej w HTML  jest bardzo prosta. Osobiście znam 3 sposoby na jej utworzenie.

Przy czym nie koniecznie każda z tych metod jest tak naprawdę praktyczna w zastosowaniu na stronach internetowych. Na początek warto zapoznać się z kilkoma podstawowymi elementami takimi jak punktowane listy oraz pseudo elementy :before i :after.

Zmiana koloru wypunktowania z pseudo elementem

Powyżej zamieściłam już link do pseudo elementów warto się z nim zapoznać jeśli nie posiadamy na ten temat wiedzy.

Jak widać teraz mamy przy naszej liście punktator, czerwoną kropeczkę. Oczywiście może to być inny kształt ja jednak użyłam:

content: "•";

Zmiana koloru punktora z użyciem obrazka / grafiki

W tym wypadku rolę punku odegra grafika umieszczona w tle. Ważnym aspektem w tej metodzie jest użycie odpowiedniego obrazka. Nie może być on specjale ani za duży ani za mały.

Dokładniejsze szczegóły CSS ustala się z pomocą dobrze ustawionego padding. Jego wartość powinna być dostosowana do konkretnego obrazka oraz naszych potrzeb.

Zmiana koloru z pomocą znacznika span

Ta metoda w praktyce polega na zabawie kolorami.

Metoda ta jest najmniej praktyczna. Korzystając z niej sami musimy pilnować wstawiania dodatkowego znacznika – co może okazać się bardzo irytujące. A w przypadku jego pominięcia cały tekst zabarwi się na czerwono.

Podsumowanie

Jak widać na powyższych przykładach istnieje kilka sposobów na stworzenie ciekawej wypunktowanej listy.

W praktyce to z jakiej metody będziecie korzystać zależy tylko od was. Z pewnością jednak dwie pierwsze są najbardziej wygodne w użytkowaniu. Po wprowadzeniu do styli strony odpowiedniej zmiennej wygląd wypunktowania będzie się ustawiał sam bez naszej interwencji.