如何在标签上修改::before伪类的内容

要在标签上修改 `::before` 伪类的内容，您需要使用 JavaScript 来动态更改伪元素的内容。以下是一种实现方法：

1. 首先，给您想要修改伪类内容的标签添加一个 `id`，以便可以在 JavaScript 中获取到该标签。

2. 在 JavaScript 中，使用 `window.getComputedStyle()` 方法获取该标签的伪元素样式对象。

3. 使用 `style.setProperty()` 方法来修改伪元素的 `content` 属性。

以下是一个示例代码：

<!-- 在标签上添加 id -->
<div id="my-tag">原始内容</div>

/* 定义伪元素的样式 */
#my-tag::before {
  content: "前缀：";
  color: red;
}

// 获取标签的伪元素样式
const tag = document.getElementById("my-tag");
const beforeStyle = window.getComputedStyle(tag, "::before");

// 修改伪元素内容
tag.style.setProperty("--before-content", "'新前缀：'");

// 修改伪元素样式
tag.style.setProperty("--before-color", "green");

/* 使用变量来动态设置伪元素的样式 */
#my-tag::before {
  content: var(--before-content, "前缀：");
  color: var(--before-color, red);
}

在上面的代码中，我们首先定义了一个带伪元素的标签，并为该伪元素定义了样式。然后，在 JavaScript 中，我们通过 `window.getComputedStyle()` 方法获取该伪元素的样式对象，并使用 `style.setProperty()` 方法来修改伪元素的 `content` 和 `color` 属性。最后，我们使用 CSS 变量来动态设置伪元素的样式。