Блог

Главная - Вопросы по программированию - Как добавить пользовательские элементы:before и:hover в tailwind?

Как добавить пользовательские элементы:before и:hover в tailwind?

#css #tailwind-css

#css #tailwind-css

Вопрос:

Я пытаюсь воссоздать некоторые обычные стили css в tailwind, но у меня возникают проблемы, когда дело доходит до интеграции псевдоэлементов :before.

Это то, что у меня есть, но по какой-то причине, когда я просматриваю его в браузере, ничего не происходит.

Предполагается, что это должно иметь эффект подчеркивания.

 <p
  className="
          relative transition-all w-min-content
          before:content-none before:w-0 before:h-1 before:absolute before:bottom-0 before:right-0 before:bg-blue-400 before:transition-all before:duration-500
          hover:before:w-full hover:before:left-0 hover:before:bg-red-500
          ">
  Underline
</p>

Комментарии:

1. Не могли бы вы использовать инструменты разработчика вашего браузера для проверки объекта, чтобы увидеть, какой CSS был сгенерирован. Когда я «перевожу» его вручную в CSS, он ведет себя нормально — красная строка появляется на полсекунды при наведении курсора и исчезает вправо при наведении курсора.

Ответ №1:

Вы явно устанавливаете содержимое как none, и оно никогда не меняется при наведении курсора.

Не уверен, что вам нужно это делать, поскольку у вас есть pre-hover w-0 . Но простое удаление before:content-none дает этот результат https://play.tailwindcss.com/rq6j7aBlca

Метки: