0

I have an unordered list that I have made horizontal. I want a bullet between each element. (The website is responsive, so I don't know where the line-break might occur).

I am wondering if there is something I could do to remove the first bullet in every new line.

Here is what i got so far.

HTML:

<ul class="list-horizontal">
    <li>Inline list item #1</li>
    <li>Inline list item #2</li>
    <li>Inline list item #3</li>
    <li>Inline list item #4</li>
    <li>Inline list item #5</li>
</ul>

CSS:

.list-horizontal {
  text-align: center;
  font-size: 18px;
  padding: 0;
}

.list-horizontal li {
  display:inline-block;
}
.list-horizontal li:before {
  content: '\00a0\2022\00a0\00a0';
  color:#fff;
}
.list-horizontal li:first-child:before {
  content: '';
}

JSFiddle

https://jsfiddle.net/tkcezggs/3/

But this only removes the bullet on the first element.

Is this possible. Either with javascript/jquery or with pure css?

AloHA_ChiCken
  • 484
  • 1
  • 5
  • 24
beist
  • 21
  • 2
  • Hm, I'm not sure that it's possible without Javascript. Let's see other answers... – P.S. Jan 09 '18 at 22:39
  • 1
    It will be interesting to find a solution that can do that with the use of css only without Javascript. – orabis Jan 09 '18 at 22:40
  • Only way doing it with css alone would be to use media queries and know which `nth-child` at various breakpoints to change content on – charlietfl Jan 09 '18 at 23:08

1 Answers1

0

Try to use additional list items with different class. For example:

<ul class="list-horizontal">
  <li>Inline list item #1</li>
    <li class='separator'>|</li>
  <li>Inline list item #2</li>
    <li class='separator'>|</li>
  <li>Inline list item #3</li>
    <li class='separator'>|</li>
  <li>Inline list item #4</li>
</ul>

Then you can declare a css rule for this class on different views. For example you can use 'display: none' on the separator class for mobile view.

PS: As this way you don't need bullets on the list item so you it's better to hidden them through CSS.

Saeed Sepehr
  • 93
  • 1
  • 7