Generating a vertical bar adjacent to a bullet point in a list

Question

Generating a vertical bar adjacent to a bullet point in a list

Is there a way to add a vertical line next to each list item (except the last) without adding a new div? Adding a border line added an extra one that I didn't want.

Sample 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;

}

html css

Answer 1

Answer №1

To create a right border on all the list items (li), simply add the style to each one and then remove it from the last item using the :last-child pseudo-class. This technique is perfect for handling dynamic content.

View Example Here

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

Alternatively, you can use the :not() pseudo-class to apply the border to all but the last item initially.

View Example Here

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

Check browser support for these methods here.

If you're worried about browser compatibility, an alternative approach is to add a left border and then remove it from the first child element. Using :first-child may have better support than :last-child or :not, especially for older versions of Internet Explorer.

View Example Here

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

Answer 2

To create a right border on all the list items (li), simply add the style to each one and then remove it from the last item using the :last-child pseudo-class. This technique is perfect for handling dynamic content.

View Example Here

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

Alternatively, you can use the :not() pseudo-class to apply the border to all but the last item initially.

View Example Here

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

Check browser support for these methods here.

If you're worried about browser compatibility, an alternative approach is to add a left border and then remove it from the first child element. Using :first-child may have better support than :last-child or :not, especially for older versions of Internet Explorer.

View Example Here

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

Answer 3

Answer №2

To create a unique effect, consider adding a border to each <li> element and then removing the border from the final element by utilizing the css last child selector: li:last-child targets the last li element in its parent.

You can enhance this technique by incorporating the :not selector within a single css block.

Check out the JSFiddle Demo for a visual example.

Answer 4

To create a unique effect, consider adding a border to each <li> element and then removing the border from the final element by utilizing the css last child selector: li:last-child targets the last li element in its parent.

You can enhance this technique by incorporating the :not selector within a single css block.

Check out the JSFiddle Demo for a visual example.

Answer 5

Answer №3

To enhance the list, one option could be to add a border-right to the entire list and then utilize jQuery to eliminate it from the last item.

If you are unsure of the ID for the last item in advance, it becomes slightly more complex, but you can still achieve the desired result by targeting the item "Contact" with the following code:

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

Answer 6

To enhance the list, one option could be to add a border-right to the entire list and then utilize jQuery to eliminate it from the last item.

If you are unsure of the ID for the last item in advance, it becomes slightly more complex, but you can still achieve the desired result by targeting the item "Contact" with the following code:

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

Answer 7

Answer №4

Here is a way to enhance your list items:

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

Alternatively:

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

Answer 8

Here is a way to enhance your list items:

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

Alternatively:

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

Answer 9

Answer №5

Check out this straightforward and versatile solution that is compatible with older browsers: http://jsfiddle.net/d4n7pRy2/.

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;
}

Answer 10

Check out this straightforward and versatile solution that is compatible with older browsers: http://jsfiddle.net/d4n7pRy2/.

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;
}

Generating a vertical bar adjacent to a bullet point in a list

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Stopping the sound when its' Div is hovered over

Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

Looking for assistance with extracting only numerical values from a webpage using Selenium in Python

Maximize background width with a gradient that is compatible with web-based email clients such as Outlook and Gmail

What is the method to run a script within a particular div?

Incorporating text onto an HTML webpage

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

Learn how to showcase a text file uploaded to a webpage with NODE js and HTML

Developing an interactive contact page using bootstrap technology

Adding the "input-invalid" class to the input doesn't take effect until I click outside of the input field

HTML: Issue with H1 alignment in class

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

I am looking to eliminate the right padding from a group of div elements

Tips for organizing dynamic table data following an append operation

Tips for eliminating the default arrow on the HTML select tag?

What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Exploring JqueryUI tab navigation with the help of the <a> tag

Problem aligning ul within div element

What is the method to process a JSON path containing a special character like "@"?

Using a Node.js module to shrink HTML files