CODEWITHSUNDEEP
css
Soroush Rabiei
Soroush Rabiei

Reputation: 10868

Insert some char between <li>s

I have a framework which generates some html and echos them. In a particular situation, the framework generates a HTML numeration:

<ul>
     <li class="foo">A</li>
     <li class="foo">B</li>
     <li class="foo">C</li>
</ul>

which is displayed in an in-line manner like A B C. How can I change the foo class in CSS code get text to be displays like A * B * C ?

Upvotes: 1

Views: 114

Answers (2)

Scimonster
Scimonster

Reputation: 33409

li.foo::after {content: '*'}
li.foo:last-child::after {content: ''}
<ul>
     <li class="foo">A</li>
     <li class="foo">B</li>
     <li class="foo">C</li>
</ul>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074959

Modulo browser support, you should be able to do it with :first-child:

.foo::before {
    content: "* "
}
.foo:first-child::before {
    content: ""
}

Example:

.foo {
  display: inline-block;
}
.foo::before {
  content: "* "
}
.foo:first-child::before {
  content: ""
}
<ul>
     <li class="foo">A</li>
     <li class="foo">B</li>
     <li class="foo">C</li>
</ul>

Upvotes: 4

Related Questions