Creating a vertical line next to a list item
I want to put a little vertical line next to the right of each list item (except the last) but I’m wondering if there is a way to do it other than adding in a new div or something to accommodate the line. I tried just adding a border line for the list but it added one more than I needed.
Just add a right border to all the
li elements and then remove it from the last one using the
:last-child pseudo class. This will work for dynamic content.
Alternatively, you could also just use the
:not() pseudo class, and avoid applying the border to the last element to begin with.
Support for both of these methods can be found here - http://caniuse.com/#feat=css-sel3
If support is a concern, you could also alternatively just add a left border and remove it from the first child element. (
:first-child has more browser support than
:not). I doubt you need to support older versions of IE though.