如何将引号添加到 CSS 变量值，以便在 ::before/::after 内容中使用它？

How do I add quotes to a CSS Variable value, to use it in ::before/::after content?

我有以下代码：

div {
  --text: success;
}

div::before {
  content: var(--text);
}

<div></div>

这不起作用，因为 --text 按原样插入并生成 content: success（无引号）。

显然我可以 --text: 'success'，但并非总是如此 — 如果在多个属性之间重复使用变量，则其中一些不适合引号。

是否可以在 content 本身中添加引号？像 

content: "'" var(--text) "'" /* doesn't work */

会很完美。

更新：

如果不使用某种类型的预处理器，如 SASS 或 LESS，这是不可能的。

以下答案没有回答问题，我留下了它们以防它们对其他人有用。

您可以将引号 " 放入一个变量中，然后将所有变量分别放入内容中。

div {
  --text: 'success';
  --quo: '"';
}

div::before {
  content: var(--quo) var(--text) var(--quo);
}

<div></div>

或

直接在内容中使用引号

div {
  --text: 'success';
}

div::before {
  content: '"' var(--text) '"';
}

<div></div>