内容 - Tailwind CSS 中文网

类	属性
content-none	content: none;

基本用法

¥Basic usage

设置伪元素的内容

¥Setting a pseudo-element’s content

使用 content-* 工具以及 before 和 after 变体修饰符来设置 ::before 和 ::after 伪元素的内容。

¥Use the content-* utilities along with the before and after variant modifiers to set the contents of the ::before and ::after pseudo-elements.

开箱即用，content-none 是唯一可用的预配置内容工具。虽然你可以通过定制你的主题添加其他工具，但通常只使用任意值更有意义。

¥Out of the box, content-none is the only available preconfigured content utility. And while you can add additional utilities by customizing your theme, it generally makes more sense to just use an arbitrary value.

使用方括号表示法动态定义任意内容值。

¥Use the square bracket notation to define any arbitrary content value on the fly.

Higher resolution means more than just a better-quality image. With a Retina 6K display, Pro Display XDR gives you nearly 40 percent more screen real estate than a 5K display.

Higher resolution means more than just a better-quality image. With a Retina
6K display, <a class="text-blue-600 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> gives you
nearly 40 percent more screen real estate than a 5K display.Higher resolution means more than just a better-quality image. With a Retina
6K display, <a class="text-sky-400 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> gives you
nearly 40 percent more screen real estate than a 5K display.

引用属性值

¥Referencing an attribute value

这些内容工具甚至支持 attr() 函数等 CSS 功能，你可以使用它来引用存储在属性中的值：

¥These content utilities even support CSS features like the attr() function, which you can use to reference a value stored in an attribute:

<div before="Hello World" class="before:content-[attr(before)]">
  <!-- ... -->
</div>

使用空格和下划线

¥Using spaces and underscores

由于空格表示 HTML 中类的结尾，因此用下划线替换任意值中的任何空格：

¥Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:

<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

如果你需要包含一个实际的下划线，你可以通过用反斜杠转义它来做到这一点：

¥If you need to include an actual underscore, you can do this by escaping it with a backslash:

<div class="before:content-['Hello\_World']">
  <!-- ... -->
</div>

有条件地应用

悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如，使用hover:before:content-['Hovering'] 仅在 hover 时应用 before:content-['Hovering'] 工具。

<div class="before:content-['Not_Hovering'] hover:before:content-['Hovering']">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:before:content-['Desktop'] 仅在中等屏幕尺寸及以上时应用 before:content-['Desktop'] 工具。

<div class="before:content-['Mobile'] md:before:content-['Desktop']">
  <!-- ... -->
</div>

要了解更多信息，请查看有关响应式设计、暗黑模式、以及其他媒体查询修饰符的文档。

使用自定义值

¥Using custom values

自定义主题

¥Customizing your theme

默认情况下，Tailwind 仅提供 content-none 工具。你可以通过编辑 tailwind.config.js 文件中的 theme.content 或 theme.extend.content 来自定义这些值。

¥By default, Tailwind only provides the content-none utility. You can customize these values by editing theme.content or theme.extend.content in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      content: {
        'link': 'url("/icons/link.svg")',
      },
    }
  }
}

在主题定制文档中了解有关自定义默认主题的更多信息。

¥Learn more about customizing the default theme in the theme customization documentation.

任意值

¥Arbitrary values

如果你需要使用一次性的 content 值，而该值没有必要包含在你的主题中，请使用方括号动态生成属性，使用任意值。

<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

在任意值文档中了解有关任意值支持的更多信息。

内容

Quick reference