| hinter jedem Nav-Punkt

[MrMurphy1]

Hallo

Du kannst die Navigation auch aktueller und übersichtlicher erstellen. Ein Liste kann verwendet werden, ist aber keineswegs Pflicht.

Zu dem HTML

<nav class="top">
   <a href="#">Punkt 1</a>
   <a href="#">Punkt 2</a>
   <a href="#">Punkt 3</a>
   <a href="#">Punkt 4</a>
   <a href="#">Punkt 5</a>
</nav>

dieses CSS

.top {
   margin-top: 1.5em;
   display: flex;
}
.top a {
   color: #013c6d;
   font-size: 0.813em;
   text-decoration: none;
   text-transform: uppercase;
}
.top a:nth-last-child(1n+2)::after {
   content: "|";
   margin-left: 0.5em;
   margin-right: 0.5em;
}

Großer Vorteil: Die ganzen CSS-Angaben für die überflüssige Liste entfallen.

Gruss

MrMurphy