如何在顺风中添加自定义 :before 和 :hover 元素？答案

【问题标题】：How to add custom :before and :hover elements in tailwind?如何在顺风中添加自定义 :before 和 :hover 元素？
【发布时间】：2022-01-15 22:46:29
【问题描述】：

我正在尝试在顺风中重新创建一些常规的 css 样式，但是在集成 :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>

【问题讨论】：

您能否使用您的浏览器开发工具检查工具来查看已生成的 CSS。当我手动将其“翻译”为 CSS 时，它的行为正常 - 红线在悬停时出现超过半秒，在非悬停时消失在右侧。

标签： css tailwind-css

【解决方案1】：

您将内容明确设置为无，并且在悬停时永远不会改变。

不确定是否需要这样做，因为悬停前您有 w-0。但是只需删除before:content-none 就会得到这个结果https://play.tailwindcss.com/rq6j7aBlca

【讨论】：