Блог

Можно ли использовать before псевдокласс и присоединить not псевдокласс?

Например, учитывая простой список элементов, я добавляю «светло-серую» точку за каждым именем элемента списка:

 // HTML:

<ul>
  <li>Ace</li>
  <li class="notme">Bay</li>
  <li>Cat</li>
</ul>


// CSS:

li {
  padding: 10px;
  color: green;
}

li::before {
  content: '';
  z-index: -1;
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background: lightgray;
}
  

Смотрите также следующий codepen:
https://codepen.io/philipyoo/pen/KKMPOgW

Чего я пытаюсь добиться, так это продолжать полагаться на before псевдокласс, но не добавлять стили, которые он предоставляет для любого элемента списка с классом notme .

В примере codepen «Ace» и «Cat» должны по-прежнему иметь светло-серый круговой фон, а «Bay» не должен иметь этот светло-серый круговой фон. Есть ли способ связать not псевдокласс с before псевдоклассом?

Здесь у вас есть: codepen — просто используйте li:not(.notme):before { ... }