Subscribe on changes!

Impossible to use data in '::before` pseudo-selector in `content' property

avatar
May 30th 2022

Vue version

3.2.21

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eyJBcHAudnVlIjoiPHNjcmlwdD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSc7XG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgc2V0dXAoKSB7XG4gICAgY29uc3QgbXNnID0gcmVmKCdIZWxsbyBXb3JsZCEnKTtcblx0ICBjb25zdCBjb2xvciA9ICcjY2MwMDAwJztcblx0XHRjb25zdCBzaXplID0gJzIwcHgnO1xuICAgIFxuICAgIHJldHVybiB7XG4gICAgIFx0bXNnLFxuICAgICAgY29sb3IsXG4gICAgICBzaXplLFxuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGgxPnt7IG1zZyB9fTwvaDE+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgc2NvcGVkPlxuICBoMSB7XG4gICAgY29sb3I6IHYtYmluZChjb2xvcik7XG4gIH1cbiAgXG4gIGgxOjpiZWZvcmUge1xuICAgIC8qIHRoaXMgd29ya3MgKi9cbiAgICBjb250ZW50OiAnVGVzdCc7XG4gICAgXG4gICAgLyogYW5kIHRoaXMgaXNuJ3Qgd29yay4gVW5jb21tZW50IHRvIGNoZWNrICovXG4gICAgLyogY29udGVudDogdi1iaW5kKG1zZyk7ICovXG4gICAgXG4gICAgLyogYmluZGluZyBub3QgZm9yICdjb250ZW50JyBwcm9wZXJ0eSB3b3JrcyBhbHNvKi9cbiAgICBmb250LXNpemU6IHYtYmluZChzaXplKTtcbiAgfVxuPC9zdHlsZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIixcbiAgICBcInZ1ZS9zZXJ2ZXItcmVuZGVyZXJcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSJ9

Steps to reproduce

I'd like to bind some data from script to ::before pseudo-selector

Determine some property in setup or data and try to use it in ::before in styles section. This is works, but only content property can't accept any data from script section

What is expected?

I expect to see actual data in content property

What is actually happening?

Nothing happens.

System Info

System:
    OS: Linux 5.15 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 6.76 GB / 15.45 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.1.0 - /usr/bin/node
    Yarn: 1.22.18 - /usr/bin/yarn
    npm: 8.5.5 - /usr/bin/npm
  Browsers:
    Firefox: 100.0
  npmPackages:
    vue: ^3.2.21 => 3.2.32

Any additional comments?

No response

avatar
May 30th 2022

The CSS content attribute requires quotes around string values.

-const msg = ref('Hello World!');
+const msg = ref('"Hello World!"');

See this demo.