3

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.

Andrey Shchekin
  • 21,101
  • 19
  • 94
  • 162
  • So you want to convert an identifier to a string? I don't think it's possible. The only way I know of type coercion is when using [`attr()`](https://www.w3.org/TR/2016/CR-css-values-3-20160929/#funcdef-attr) – Oriol Oct 09 '16 at 23:16

1 Answers1

4

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>
Community
  • 1
  • 1
johnchar
  • 547
  • 10
  • 22
  • OP is already aware that using quotes works. – Oriol Oct 09 '16 at 23:16
  • Well, I still see the same problem. The question says "Obviously I can do `--text: 'success'`", and your answer is basically "use `--text: 'success'`". – Oriol Oct 09 '16 at 23:28
  • Yes, I now see what you mean. I will update my answer or I might leave it in case someone else finds it useful. – johnchar Oct 09 '16 at 23:46
  • If op wants this answer removed, do let me know first. Please do not down-vote, thanks! – johnchar Oct 09 '16 at 23:55
  • @Devphile Thanks -- "it's not possible" is a valid answer (I'll wait a bit before approving, in case someone knows a way). The "below answers" are a bit confusing though since they don't really apply. – Andrey Shchekin Oct 10 '16 at 01:03
  • You are very much welcome. Let me know if there's something you want me to change / remove. – johnchar Oct 10 '16 at 06:22