CODEWITHSUNDEEP
htmlcss
user3769402
user3769402

Reputation: 211

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.

html

<ul class="list">
            <li><span id = "home">Home</span></li>
            <li><span id = "about">About</span></li>
            <li><span id = "portfolio">Portfolio</span></li>
            <li><span id = "contact">Contact</span></li>
        </ul>

CSS

.list li {
display: inline;
margin: 0px 25px 0px 0px;
white-space: nowrap;
font-family: Oswald;
color: white;
}

.list {
    text-align: right;
    padding-right: 2%;
    }

#home {
height: 50px;
background-color: black;

}

Upvotes: 1

Views: 8260

Answers (5)

DRD
DRD

Reputation: 5813

Here's a more universal and simpler solution that will work in older browsers without a hitch: http://jsfiddle.net/pw3vpvLv/.

HTML:

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
</ul>

CSS:

ul > li {
    display:inline-block;
    padding: 5px 10px;
}

ul > li + li {
    border-left: 1px solid;
}

Upvotes: 0

Mathieu David
Mathieu David

Reputation: 5278

You can achieve that by adding a border on every <li> item and just removing the border for the last element using the css last child selector: li:last-child selecting the last li element of its parent.

You can even combine that with the :not selector to achieve it with one css block.

JSFiddle Demo

Upvotes: 1

Gerardo Charles Rojas Vega
Gerardo Charles Rojas Vega

Reputation: 633

You can add this:

li:before {
    content: " | ";
}
li:first-child:before {
    content: none;
}

Or:

li:not(:first-child):before {
    content: " | ";
}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240938

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.

Example Here

.list li {
    display:inline-block;
    border-right:2px solid;
    padding:10px;
}
.list li:last-child {
    border-right:none;
}

Alternatively, you could also just use the :not() pseudo class, and avoid applying the border to the last element to begin with.

Example Here

.list li:not(:last-child) {
    border-right:2px solid;
}

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 :last-child/:not). I doubt you need to support older versions of IE though.

Example Here

.list li {
    display:inline-block;
    border-left:2px solid;
    padding:10px;
}
.list li:first-child {
    border-left:none;
}

Upvotes: 6

stranger
stranger

Reputation: 388

I would probably set a border-right on the whole list and use jQuery to remove it on the last item.

This is a little trickier if you don't know the ID of the last item ahead of time, but if it's always going to be "Contact," you can say 

$("#contact").attr('style','border-right:none');

Upvotes: 0

Related Questions