How to set separator between list element properly with CSS and HTML?

Question

I have a simple list like this, and I want to use | as the separator between each list item. How can I do this properly?

ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Current output: Item 1 Item 2 Item 3

Expected output: Item 1 | Item 2 | Item 3

The easiest way I can think of is to include the separator as an HTML element, it does look good to me for wrapping it with <li>, as their content semantically is irrelevant with the list. Besides, using a tag other than <li> in <ul>/<ol> is forbidden.

What is the best way to approach this issue?

Alohci · Accepted Answer · 2020-07-31 07:31:31Z

It's unclear whether you want to retain the bullet point markers or the <ul>'s default left padding. Assuming you don't, you can simply use display:contents with a ::before pseudo-element on each <li> element except the first to make the separators their own flex-items. Like this:

ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
}
li {
  display: contents;
}
li + li::before {
  content: '|';
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

If you do want the bullet point markers, you'll need to add another element inside the <li> elements to restore them. Like this:

ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
}
li {
  display: contents;
}
li + li::before {
  content: '|';
}
li > span {
  display:list-item;
}

<ul>
  <li><span>Item 1</span></li>
  <li><span>Item 2</span></li>
  <li><span>Item 3</span></li>
</ul>

Chaska · Accepted Answer · 2020-07-31 01:55:30Z

2

Try using border which is the easiest way to achieve.

ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
li:not(:last-child) {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 1px solid;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

answered Jul 31, 2020 at 1:55

Chaska

3,2151 gold badge13 silver badges17 bronze badges

4 Comments

John Winston Over a year ago

But still this does not center the separator. Maybe there is a better way to do this?

Chaska Over a year ago

What does it mean by center the separator?

John Winston Over a year ago

I mean I want the separator locates in the middle of two items.

Chaska Over a year ago

It should be at the middle of items now. Anyway you can adjust padding-right and margin-right to get the correct position.

laurence keith albano · Accepted Answer · 2020-07-31 01:59:20Z

0

You can user after element in your li to assign | every after li.

ul{
  diplay: flex;
  justify-content: space-evenly;
  align-items: center
}

ul li {
  position:relative;
  margin:0 2px;
  padding:0 2px;
  display:inline-block;
  vertical-align:top;
}
ul li:after {
  position:absolute;
  content:'|';
  right:-5px;
}
ul li:first-child {
  margin-left:0;
}
ul li:last-child {
  margin-right:0;
}

answered Jul 31, 2020 at 1:59

laurence keith albano

1,5025 gold badges30 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to set separator between list element properly with CSS and HTML?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related