Как удалить символ из этого нижнего колонтитула?

Question

Моя цель - создать нижний колонтитул, подобный приведенному ниже

[введите описание изображения здесь] [1]

[1]: пример нижнего колонтитула

Есть ли способ удалить символ точки из последнего селектора списка, используя этот способ?

            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>

Спасибо

Answer 1

Можно объединить псевдоселекторы :last-child и :after, чтобы создать селектор, предназначенный только для последнего псевдоэлемента :after. Отсюда вам просто нужно переопределить существующий content пустой строкой. Обратите внимание, что селектор li:last-child:after уже имеет больше специфичности , чем li:after, так что это автоматически переопределит точку и должно быть всем, что вам нужно:

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

С точки зрения SASS это будет:

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

Это можно увидеть в следующем:

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

Вы забыли :after в своем последнем дочернем селекторе. Это должно работать:

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