UnoCSS使用:before伪类样式

阅读提示：本文共计约1937个文字，预计阅读时间需要大约5分钟，由作者wps手机版编辑整理创作于2023年11月06日01时34分59秒。

在 UnoCSS 中，可以使用 :before 伪类来添加元素前的内容。以下是如何使用 :before 的示例：

1. 在 CSS 文件中引入 unocss/postcss-preset-unocss 预设：

@import '~unocss/postcss-preset-unocss';

2. 使用 :before 伪类，并传入需要插入的内容和选择器：

/* 使用 content 属性设置文本 */
.example::before {
  content: 'Example';
}

/* 使用 attr 属性设置元素的属性值 */
.example::before {
  attr: 'data-example';
}

/* 使用 style 属性设置内联样式 */
.example::before {
  style: {
    color: red;
  };
}

3. 在 HTML 中使用相应的选择器：

<div class="example"></div>

这样，当页面加载时，.example 选择器下的元素就会应用 :before 伪类样式。