Как сделать так, чтобы при добавлении новых li, псевдоэлемент ::after добавлялся автоматически?

Question

[nvanyuk09]

Необходимо сделать так, чтобы при добавлении новых элементов списка li c обеих сторон псевдоэлемент ::after появлялся автоматически. Если добавлять li сначала списка все работает. Если с конца, то нет. Сейчас там стоит content:none, но иначе я не понимаю как спрятать:: after.

https://codepen.io/nvanyukova/pen/wvGpQGm

Comments

[Danny Arty]

Немного непонятно. Вам нужно при добавлении элементов li:
если не последний - то добавить after, если последний - то убрать так?

[nvanyuk09]

Danny Arty, да)

Answer 1

[Danny Arty]

Не надо добавлять класс menu__link_no-line. Просто убирайте after у ссылки для последнего элемента li.menu__item

Comments

[nvanyuk09]

точно! спасибо!

Answer 2

[chaos1909]

.menu{
       display: flex;
      justify-content: center;
       margin-top: 120px;
       padding: 0;
     }
.menu__item{
  list-style: none;
     }
.menu__item::after{
  content:"";
  display: inline-block;
  padding-right: 20px;
  height: 3px;
  background-color: #cccccc;
}    
.menu__item:last-child::after{
  padding: 0px;
  
}
.menu__link {
 
      color: white;
      background-color: #bdde38;
      padding: 8px 16px;
      text-decoration: none;   
      border-radius:50%;
      border:3px solid #cccccc;
     }
.menu__link:active{
    background-color: #ab4a9c;
}
.menu__link_next{
    background-color: #cccccc;
    color:black;
}