如何在 Tailwind CSS 中使用 ::before 和 ::after

在本文中，我们将学习如何在 Tailwind CSS 中使用::before和::after选择器。如果您还不知道Tailwind CSS是什么，那么您应该了解一下，因为它真的非常棒。相信我，一旦习惯了它，您就离不开它了。

现在让我们继续阅读本文。此功能仅在即时 (JIT)before模式下可用。Tailwind 提供对和等伪元素样式的第一方支持after：

<div class="before:absolute before:bg-blue-500 after:flex after:bg-blue-300" ></div>

默认情况下它已经存在了content: ""，所以你不必担心。任何时候你使用 abefore或after变体来确保元素被渲染，但你可以使用完全支持任意值的内容实用程序来覆盖它：

<div class="before:content-['hello'] before:block ..."></div>

您甚至可以使用 CSS 函数从属性中获取内容attr()：

<div
  before="hello world"
  class="before:content-[attr(before)] before:block ..."
></div>

当你的内容包含空格时，这会非常有用，因为 CSS 类名中不能使用空格。你可以使用几乎任何属性before和after

Tailwind 是一款超棒的 CSS 框架。在我看来，它是迄今为止最好的。每个人都应该学习它，而且它非常容易学习和使用。想了解更多类似的文章，请关注。