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

Question

I have the following code:

div {
  --text: success;
}

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

<div></div>

This doesn't work because --text is inserted as-is and produces content: success (no quotes).

Obviously I can do --text: 'success', but not always — if variable is reused between several properties, quotes would not be appropriate for some of those.

Is it possible to add the quotes in content itself? Something like

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

would be perfect.

Answer 1

更新：

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

下面的答案没有回答这个问题，我把它们留了下来，以防它们可能对其他人有用。

您可以将引号"放在 var 中，然后将所有 var 分别放在内容中。

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>