Wstęp
Każdy z moich wpisów na tej stronie opatrzony jest spisem treści. Celem tego elementu jest ułatwienie użytkownikowi dotarcie do interesującej go treści. Zatem jakie elementy powinien zawierać spis treści?
- Tytuły rozdziałów, podrozdziałów lub sekcji.
- Elementy (kropki lub kreski) łączące tytuł z numerem strony.
- Numer strony, na której znajduje się dana treść.
Łatwo zauważyć, że w przypadku mojej strony, trzeciego punktu nie ma, ale to chyba całkiem logiczne.
Szablon w HTML
Zacznijmy od napisania wstępnego kodu HTML odpowiedzialnego za nasz spis treści.
dark
Powyższy kod jeszcze nie wygląda zbyt atrakcyjnie, jednak dobrze symuluje semantykę spisu treści na stronie lub w książce.
Style CSS tytułu i numeru strony
Mając już gotowy kod HTML, należy zastanowić się, jak będzie wyglądał nasz spis treści w CSS.
Musimy umieścić tytuł rozdziału z lewej strony, następnie numer strony z prawej. Pomiędzy nimi powinien znaleźć się obszar „wykropkowany”. Zatem jak to wykonać w CSS? Przypomnijmy sobie selektory CSS, które sprawdzą się tutaj bardzo dobrze.
.toc {
display: flex;
flex-flow: column wrap;
color: #041c36;
font-size: 1rem;
margin: 2rem auto;
max-width: 800px;
li {
a {
width: 100%;
text-decoration: none;
color: #041c36;
display: flex;
flex-flow: row nowrap;
width: 100%;
margin: 0.2rem 0;
font-size: 1rem;
}
ol {
padding-inline-start: 1rem;
margin: auto;
}
}
&__title {
display: flex;
width: 100%;
&::after {
border-bottom: 1px dotted #b0b0b0;
content: " ";
flex: 1;
margin: 0 5px;
}
}
&__page {
font-size: 1rem;
text-align: right;
}
}
Efektem powyższego kodu jest nasz spis treści. Analizując go od początku, blok będzie wykonany we flexbox, w układzie kolumny. Wewnątrz wiersza mamy do czynienia także z „flexem”, tym razem już elementy będą ułożone tak, aby tytuł i numer znalazły się obok siebie.
Tutaj zaczyna się cała zabawa naszym pseudo-selektorem ::after
. Posłuży nam on do wykonania kropek pomiędzy tytułem a numerem.
::after {
border-bottom: 1px dotted #b0b0b0;
content: " ";
flex: 1;
margin: 0 5px;
}
Efekt końcowy spisu treści w CSS
dark
Do czego jeszcze?
Pomysłów, do czego jeszcze można to wykorzystać jest wiele, choćby cennik usług czy produktów.
Przykładem tutaj są grupy produktów wraz z cenami:
dark
Przeczytaj także

Gradienty CSS – omówienie
Gradienty w CSS są szeroko stosowane w wielu miejscach, od tworzenia prostych tła po skomplikowane wzory, takie jak gradienty wielokolorowe.

Jak rozmyć tło w CSS?
Ciekawym rozwiązaniem na stronie internetowej może być element, który zawiera rozmyte tło. Można to uzyskać za pomocą właściwości CSS.

CSS Container Queries już działa!
Container Queries już działa! Zapowiedzi potwierdziły się i mamy już możliwość korzystania z tego rozwiązania w najnowszych, stabilnych wersjach przeglądarek.