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.