dream hunter dream hunter - 9 days ago 5
HTML Question

How to remove html unicode content from the last element of a dynamic list?



li:after{ content:"\00b6"; }

<ol>
<li>banana</li>
<li>orange</li>
<li class="last-class">apple</li>
</ol>





I working on a dynamic list (the no of
<li>
tags are varying on time ).I need to be remove the html unicode content from the last element.the last element have a class(here it is "last-class").Is it possible to do with css?

Note : I know it's possible with different fonts.I did not use that here.

Answer

You can use the :not pseudo-class to add the pseudo-element only to elements other than the last child.

li:not(:last-child):after {
  content: "\00b6";
}
<ol>
  <li>banana</li>
  <li>orange</li>
  <li class="last-class">apple</li>
</ol>


As you've indicated that you only need to remove it from the last element, the class is not really required but you can do it with the class also like in the below snippet:

li:not(.last-class):after {
  content: "\00b6";
}
<ol>
  <li>banana</li>
  <li>orange</li>
  <li class="last-class">apple</li>
</ol>

Comments