The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Make Nav Links From An Unordered List With Separators in CSS

TODO: Pull subtitle into page object
Code
<nav>
  <ul>
    <li>alfa</li>
    <li>bravo</li>
    <li>charlie</li>
  </ul>
</nav>

You can use this CSS to create nav links that are all on one line with a | separator between them

Code
nav > ul {
    list-style-type: none;
    padding-left: 0;
}

nav > ul > li {
    display: inline-block;
}

nav > ul > li:nth-last-child(n+2)::after {
    display: inline-block;
    content: '|';
    padding: 0 3px;
}

I like this approach because the `:nth-last-child(n+2)`` puts the separator between the links without having to do anything in the HTML. And, it does so without adding one after the last link.

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Make Nav Links From An Unordered List With Separators in CSS

Given this HTML

-- code
-- html

<nav>
  <ul>
    <li>alfa</li>
    <li>bravo</li>
    <li>charlie</li>
  </ul>
</nav>

-- p


You can use this CSS to create nav links
that are all on one line with a `|`` separator 
between them

-- code
-- css

nav > ul {
    list-style-type: none;
    padding-left: 0;
}

nav > ul > li {
    display: inline-block;
}

nav > ul > li:nth-last-child(n+2)::after {
    display: inline-block;
    content: '|';
    padding: 0 3px;
}

-- p

I like this approach because the 
`:nth-last-child(n+2)`` puts the separator
between the links without having to do 
anything in the HTML. And, it does so
without adding one after the last link. 


-- blurb

Use CSS to make separators between nav links


-- categories
-- HTML
-- CSS 


-- metadata
-- date: 2023-04-15 10:23:16
-- id: 2osz6fsg
-- site: aws
-- type: post
-- status: published