How to remove a symbol from this footer?

Question

My goal is to make a footer like this one below

[enter image description here][1]

[1]: footer example

Is there a way to remove the dot symbol from the last list selector using this way?

 li { list-style: none; display: inline-block; &:last-child{ content: "" !important; } &:after { content: " ·"; } a { text-decoration: none; color: #666666; padding: 7px 10px; } }

 <ul class="footer-nav"> <li><a href="">Legal</a></li> <li><a href="">Privacy</a></li> <li><a href="">Cookies</a></li> <li><a href="">Contact</a></li> </ul>

Thank you

Answer 1

You can chain the :last-child and :after pseudo-selectors together to create a selector that only targets the last :after pseudo-element. From here, you simply need to override the existing content with an empty string. Note that the selector li:last-child:after already has more specificity than li:after , so this will automatically override the dot, and should be all you need:

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

In terms of SASS, this would be:

li {
  &:last-child {
    &:after {
      content: "";
    }
  }
}

This can be seen in the following:

 li { list-style: none; display: inline-block; } li:last-child { content: "" !important; } li:after { content: " ·"; } li:last-child:after { content: ""; } li a { text-decoration: none; color: #666666; padding: 7px 10px; }

 <ul class="footer-nav"> <li><a href="">Legal</a></li> <li><a href="">Privacy</a></li> <li><a href="">Cookies</a></li> <li><a href="">Contact</a></li> </ul>

Answer 2

You forgot :after in your last-child selector. This should work:

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