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

UPDATE:

This is not possible without using some type of a preprocessor like SASS or LESS.

Below answers are not answering the question, I've left them in case they might be useful to someone else.

You can put the quote " inside a var and then put all your vars inside the content respectively.

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

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

<div></div>

or

using quotes inside content directly

div {
  --text: 'success';
}

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

<div></div>