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.
Co znajdziesz w tym wpisie
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.
See the Pen RwoZWZX by Aura (@Julka85) on CodePen.dark
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.
See the Pen li with image by Aura (@Julka85) on CodePen.dark
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.
See the Pen zYodvNW by Aura (@Julka85) on CodePen.dark
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.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.