Placing a delimiter between each inline li but not at the edges

Question

Is it possible to place a delimiter between each inline <li> but so that it appears only between each item in the line and never in the beginning or at the end of a line? If it can't be done with CSS then maybe can it be solved with JavaScript/jQuery?

http://codepen.io/anon/pen/Pbxddo

<ul>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
</ul>

ul {
  list-style-type: none;
  padding: 10px;
  li {
    display: inline;
    &:after {
    padding-left: 5px;
      content: '|';
    }
  }
}

EDIT: I don't think anyone understood... what I want is to remove EVERY delimiter that is in the beginning or at the end of each line, I don't know how to write it more clearly.

In this image this delimiters should be removed

So that the result will look like this

Don't tag javascript questions with java, they're not the same thing — JonK, Dec 15 '16 at 16:21
@JonK - have you seen this about java / javascript? This one is hilarious, IMO: http://stackoverflow.com/a/245073 — random_user_name, Dec 15 '16 at 16:27
@JonK Sorry, I am aware of the difference, I just typed java and I thought I saw javascript as a first tag.. I was already half asleep — Ivan Topić, Dec 16 '16 at 07:24

score 1 · Answer 1 · answered Dec 15 '16 at 16:23

Use li:last-child selector, like:

li:last-child:after {
  content: '';
}

Have a look at the snippet below, or Codepen (with SCSS).

div {
  border: 3px solid #333;
  width: 300px;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 10px;
}
ul li {
  display: inline;
  font-size: 20px;
}
ul li:after {
  padding-left: 5px;
  content: '|';
}
ul li:last-child:after {
  content: '';
}

<div>
<ul>
  <li>Something</li>
  <li>Something else</li>
  <li>Bananas, apples </li>
  <li>Tea and cookies</li>
  <li>Football or soccer</li>
  <li>sky, earth, trees, nature</li>
  <li>Furniture, painting, closet, bed, carpet</li>
  <li>window, clothes, light, door</li>
  <li>Something else in the room</li>
  </ul>
</div>

Hope this helps!

score 1 · Answer 2 · answered Dec 15 '16 at 16:24

You can use not() pseudo class and select all li elements except last one.

ul {
  display: flex;
  padding: 0;
  list-style-type: none;
}
li:not(:last-child):after {
  content: '|';
  padding: 0 10px;
}

<ul>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
</ul>

random_user_name · Answer 3 · 2016-12-15T16:35:32.093

This is a different approach than all of the (correct) :last-child answers.

Use the adjacent sibling selector: +. This selects the second li that is immediately preceded by an li. In your context, this will select all but the first li elements:

ul {
  list-style-type: none;
  padding: 10px;
  li {
    display: inline;
  }
  li + li {
    &:before {
    padding-right: 5px;
      content: '|';
    }
  }
}

Here's a working snippet demonstrating your example:

div {
  border: 3px solid #333;
  width: 300px;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 10px;
}
ul li {
  display: inline;
  font-size: 20px;
}
ul li + li:before {
  padding-right: 5px;
  content: '|';
}

<div>
<ul>
  <li>Something</li>
  <li>Something else</li>
  <li>Bananas, apples </li>
  <li>Tea and cookies</li>
  <li>Football or soccer</li>
  <li>sky, earth, trees, nature</li>
  <li>Furniture, painting, closet, bed, carpet</li>
  <li>window, clothes, light, door</li>
  <li>Something else in the room</li>
  </ul>
</div>

Personally, I prefer this method because it's less verbose, and doesn't require "overrides".

score 0 · Answer 4 · answered Dec 15 '16 at 16:23

0

You can change your css to this:

ul {
  list-style-type: none;
  padding: 10px;
  li {
    display: inline;
    font-size: 20px;
    &:after {
    padding-left: 5px;
      content: '|';
    }
  }
  li:last-child {
    display: inline;
    font-size: 20px;
    &:after {
    padding-left: 5px;
      content: '';
    }
  }
}

answered Dec 15 '16 at 16:23

George

6,116
2
24
36

@cale_b are you sure about that? – George Dec 16 '16 at 08:17

Placing a delimiter between each inline li but not at the edges

4 Answers4