Не появляется надпись, на кнопке предварительно спрятанная с помощью псевдокласса

Question

В этом при нажатии на кнопки не появляется надпись NO.

$(document).ready(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
  });
});

.button {
  position: relative;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-right: 10px;
}

.button:before:not(.active) {
  content: "NO";
  color: red;
  position: absolute;
  left: -55px;
  transition: all 450ms ease;
}

.button.active:before {
  left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button">Кнопка 1</button>
<button class="button">Кнопка 2</button>
<button class="button">Кнопка 3</button>

Если в строке .button:before:not(.active) { убрать :not(.active), тогда надписи NO есть, но они не спрятаны (прямо на кнопках). Но они появляются.

Answer 1

В JavaScript-коде при клике на кнопке добавляется класс active к элементу кнопки, поэтому текст с псевдоклассом :before исчезает. Для решения этой проблемы вы можете удалить селектор :not(.active) в CSS-правиле для псевдокласса :before или изменить его на .button:not(.active):before, чтобы текст всегда отображался перед кнопкой, независимо от класса active.

БЛОГ НА HUSL

Не появляется надпись, на кнопке предварительно спрятанная с помощью псевдокласса

Ответы (1 шт):