文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >伪元素"content“属性中的CSS变量(自定义属性)

问伪元素"content“属性中的CSS变量(自定义属性)
EN

Stack Overflow用户
提问于 2016-10-20 20:42:09
回答 4查看 28.2K关注 0票数 45

示例使用(我想要的)

代码语言：javascript
复制
div::after {
  content: var(--mouse-x) ' / ' var(--mouse-y);
}

测试用例显示它不起作用：

CodePen:伪元素“内容：”属性(测试用例)中的CSS变量

​

代码语言：javascript
复制
document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--mouse-x', e.clientX)
  document.documentElement.style.setProperty('--mouse-y', e.clientY)
  
  // output for explanation text
  document.querySelector('.x').innerHTML = e.clientX
  document.querySelector('.y').innerHTML = e.clientY
})
代码语言：javascript
复制
/* what I want!! */
div::after {
  content: var(--mouse-x, 245)" / " var(--mouse-y, 327);
}

/* setup and presentation styles */
div::before {
  content: 'mouse position:';
}
div {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(var(--mouse-x, 245) * 1px), calc(var(--mouse-y, 327) * 1px));
  width: 10em;
  height: 10em;
  background: #ff3b80;
  color: #fff;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  will-change: transform;
}
body {
  margin: 2em;
  font-family: sans-serif;
}
p {
  max-width: 50%;
  min-width: 25em;
}
代码语言：javascript
复制
<!-- test case: element with pseudo element -->
<div></div>

<!-- explanation (not test case) -->
<main>
  <pre><code>div::after {
  content: var(--mouse-x) ' / ' var(--mouse-y);
}</code></pre>
  <h1>If this worked...</h1>
  <p>
    We should see something like this: <b><span class="x">245</span> / <span class="y">327</span></b> updating with the mousemove coordinates inside the pseudo <i>::after</i> element for the div.
  </p>
</main>

​

css
pseudo-element
css-variables
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-10-21 14:50:30

为了清晰起见，编辑:带有整数值的 CSS自定义属性可以通过CSS计数器显示在伪元素的content属性中。

​

代码语言：javascript
复制
div {
    --variable: 123;
}
span:after {
    counter-reset: variable var(--variable);
    content: counter(variable);
}
代码语言：javascript
复制
<div>The variable is <span></span>.</div>

​

​

代码语言：javascript
复制
.coordinates:before {
    counter-reset: x var(--x) y var(--y);
    content: 'The coordinates are (' counter(x) ', ' counter(y) ').';
}
代码语言：javascript
复制
<div class="coordinates" style="--x: 1; --y: 2"></div>

​

原始答案

利用一个涉及CSS计数器的黑客让它工作起来。好好享受吧。

代码语言：javascript
复制
div::after {
  counter-reset: mouse-x var(--mouse-x, 245) mouse-y var(--mouse-y, 245);
  content: counter(mouse-x) " / " counter(mouse-y);
}

行动中的完整守则：

​

代码语言：javascript
复制
document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--mouse-x', e.clientX)
  document.documentElement.style.setProperty('--mouse-y', e.clientY)
  
  // output for explanation text
  document.querySelector('.x').innerHTML = e.clientX
  document.querySelector('.y').innerHTML = e.clientY
})
代码语言：javascript
复制
/* what I want!! */
div::after {
  counter-reset: mouse-x var(--mouse-x, 245) mouse-y var(--mouse-y, 245);
  content: counter(mouse-x) " / " counter(mouse-y);
}

/* setup and presentation styles */
div::before {
  content: 'mouse position:';
}
div {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(var(--mouse-x, 245) * 1px), calc(var(--mouse-y, 327) * 1px));
  width: 10em;
  height: 10em;
  background: #ff3b80;
  color: #fff;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  will-change: transform;
}
body {
  margin: 2em;
  font-family: sans-serif;
}
p {
  max-width: 50%;
  min-width: 25em;
}
代码语言：javascript
复制
<!-- test case: element with pseudo element -->
<div></div>

<!-- explanation (not test case) -->
<main>
  <pre><code>div::after {
  content: var(--mouse-x) ' / ' var(--mouse-y);
}</code></pre>
  <h1>If this worked...</h1>
  <p>
    We should see something like this: <b><span class="x">245</span> / <span class="y">327</span></b> updating with the mousemove coordinates inside the pseudo <i>::after</i> element for the div.
  </p>
</main>

​

票数 64
EN

Stack Overflow用户

发布于 2020-10-13 15:53:21

content属性只允许字符串，而且由于您与数字不对齐，并且CSS不能转换变量，因此您可以选择创建另一组变量(来自JS)，这些变量将用作打印值，并且类型为String。

要将--mouse-x-text设置为String，使用旧的抛出技巧2+"" = "2"将其转换为该类型是不够的，但String是我所知道的唯一可以输出“真实”字符串的方法，从已经存在的字符串值中输出，哪种类型意味着字符串的字符串，因为CSS似乎要去掉第一个字符串层。

​

代码语言：javascript
复制
document.addEventListener('mousemove', ({clientX:x, clientY:y}) => {
  const {style} = document.documentElement

  style.setProperty('--mouse-x', x)
  style.setProperty('--mouse-y', y)

  // for printing
  style.setProperty('--mouse-x-text', JSON.stringify(x+""))
  style.setProperty('--mouse-y-text', JSON.stringify(y+""))
})
代码语言：javascript
复制
body::before{
  content: "X:"var(--mouse-x-text)"  Y:"var(--mouse-y-text);
}

​

票数 5
EN

Stack Overflow用户

发布于 2016-10-20 21:22:10

我不太确定我是否正确地理解了你的问题，但我认为这是一个解决办法.

可以为<div>元素定义自定义属性。

代码语言：javascript
复制
<div data-position></div>

然后用javascript指定此属性中的位置：

代码语言：javascript
复制
  var position = e.clientX + " " + e.clientY
  document.querySelector("div").setAttribute('data-position', position)

最后，在伪元素的attr()属性中使用content CSS函数。

代码语言：javascript
复制
div::after {
  content: attr(data-position);
}

然后瞧。

代码片段：

​

代码语言：javascript
复制
document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--mouse-x', e.clientX)
  document.documentElement.style.setProperty('--mouse-y', e.clientY)
  var position = e.clientX + "/" + e.clientY
  document.querySelector("div").setAttribute('data-position', position)
    // output for explanation text
  document.querySelector('.x').innerHTML = e.clientX
  document.querySelector('.y').innerHTML = e.clientY
})
代码语言：javascript
复制
/* what I want!! */

div::after {
  content: attr(data-position);
}
/* setup and presentation styles */

div::before {
  content: 'mouse position:';
}
div {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(var(--mouse-x, 245) * 1px), calc(var(--mouse-y, 327) * 1px));
  width: 10em;
  height: 10em;
  background: #ff3b80;
  color: #fff;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  will-change: transform;
}
body {
  margin: 2em;
  font-family: sans-serif;
}
p {
  max-width: 50%;
  min-width: 25em;
}
代码语言：javascript
复制
<div data-position></div>
<span class="x"></span>/<span class="y"></span>

​

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40164169

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档