Separate each menu item by using the pipe symbol within the list tags

Question

Separate each menu item by using the pipe symbol within the list tags

Can you help me style the menu list in CSS by adding a separator | between each element?

I attempted using content: "|", but it didn't produce the desired outcome.

The current look of the menu is as follows:

<ul>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
</ul>

The current output is:

link link link link

But I am looking for:

link | link | link | link

I have a workaround in JavaScript, but leveraging CSS would be preferred. The menu is dynamically generated and I want to avoid altering its structure.

html css

Answer 1

Answer №1

To achieve this effect, utilize a pseudo-element such as ::before or ::after:

li + li::before {
    content: "| ";
}

View a demonstration here.

If you are aiming for a line instead, consider using border-(left|right) along with appropriate padding or margin, as other users have pointed out.

Answer 2

To achieve this effect, utilize a pseudo-element such as ::before or ::after:

li + li::before {
    content: "| ";
}

View a demonstration here.

If you are aiming for a line instead, consider using border-(left|right) along with appropriate padding or margin, as other users have pointed out.

Answer 3

Answer №2

To achieve this effect, I recommend using borders in the following way:

li a { border-right: 1px solid #333; display: block; }

If you wish to exclude the first item from having a border, apply the following style:

ul li:first-child a { border:none; }

Answer 4

To achieve this effect, I recommend using borders in the following way:

li a { border-right: 1px solid #333; display: block; }

If you wish to exclude the first item from having a border, apply the following style:

ul li:first-child a { border:none; }

Answer 5

Answer №3

Sharing a fiddle of your current progress would be beneficial, but the following code snippet should do the trick:

li:not(:last-child):after {
  content:"|";
}

View a live demonstration on JSFiddle.

Answer 6

Sharing a fiddle of your current progress would be beneficial, but the following code snippet should do the trick:

li:not(:last-child):after {
  content:"|";
}

View a live demonstration on JSFiddle.

Answer 7

Answer №4

Try out the following CSS code:

li {border-left: 1px solid black;}
li:first-child {border: none;}

Answer 8

Try out the following CSS code:

li {border-left: 1px solid black;}
li:first-child {border: none;}

Answer 9

Answer №5

Check out this JavaScript example.

li
{
    display:inline-block;
    list-style-type:none;
}
li:after
{
    content:"|";
    margin:0px 3px;
}

UPDATE

After realizing my mistake, I noticed another user had already provided the correct solution before me. Instead of removing my original code, I have made the necessary adjustments here: updated version.

li
{
    display:inline-block;
    list-style-type:none;
}
li+li:before
{
    content:"|";
    margin:0px 3px;
}

Answer 10

Check out this JavaScript example.

li
{
    display:inline-block;
    list-style-type:none;
}
li:after
{
    content:"|";
    margin:0px 3px;
}

UPDATE

After realizing my mistake, I noticed another user had already provided the correct solution before me. Instead of removing my original code, I have made the necessary adjustments here: updated version.

li
{
    display:inline-block;
    list-style-type:none;
}
li+li:before
{
    content:"|";
    margin:0px 3px;
}

Answer 11

Answer №6

Here is an example

http://example.com/code123

ul li a {
    display: block;
    padding: 0 15px;
    border-left: 1px solid #000;
}

ul li:first-child a {
    border-left: none;
}

Answer 12

Here is an example

http://example.com/code123

ul li a {
    display: block;
    padding: 0 15px;
    border-left: 1px solid #000;
}

ul li:first-child a {
    border-left: none;
}

Separate each menu item by using the pipe symbol within the list tags

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Issue with horizontal scrolling in ng-scrollbars occurs when scrolling from right to left

Having trouble retrieving the value from the input text in a dynamically generated table

Embracing JQuery for Frontend Development with Node.js

Expand <a> to occupy the <li> element within the menu

Using HTML to showcase various prompt messages based on the screen resolution

An alternative method to confirm the checkbox selection without physically clicking on it

The overflowing pop-up container

Utilizing AJAX to upload a file and managing it through a Java servlet on the server side

Creating a dynamic sidebar menu with clickable submenus through jQuery and CSS for a user-friendly experience

Easily move elements using a jQuery click animation

Setting minimum date on Bootstrap datepicker in Asp.net core: A quick guide

Updating the text of a Mat-Label dynamically without the need to reload the page

Tips for generating a JSON string with nested structure

Guide to redirecting traffic from one domain to another while preserving the path component

Why is the option value not visible in the dropdown selection list?

External website's Sharepoint modal dialog

Is there a way to identify if you are at the bottom row of a column defined by CSS styling?

Utilizing jQuery to pinpoint elements with personalized data attributes

What is the best way to incorporate this PHP script into an HTML document?

Embracing right-to-left (RTL) languages