如何全局修改CSS变量？hover时变量局部生效问题求助

CSS变量的作用域是定义它的元素及其所有后代元素，你的问题根源在于：

• --size 定义在 .btnLink:hover 上，.underline 是同级元素，不属于它的后代，根本访问不到这个变量
• --movefar 定义在 .btnLink 上，.underline 同样不是它的后代，自然无法继承使用

以下是两种纯CSS解决方案：

方案一：调整HTML结构（最可靠） #

把 .underline 改成 .btnLink 的子元素，让变量可以直接被子元素继承，hover状态的变量更新也能直接生效。

修改后的HTML：

<html>
<head>...</head>
<body>
<nav>...</nav>
<main>
<a href="new.html" class="btnLink">
  Create a new project!
  <div class="underline"></div>
</a>
</main>
</body>
</html>

修改后的CSS：

:root {
  --size: 0;
  --movefar: translate(-50%, 0);
}

.btnLink {
  position: absolute;
  left: 50%;
  transform: var(--movefar);
  /* 让a元素成为子元素的定位容器 */
  position: relative;
}

.btnLink:hover {
  --size: 500px;
}

.underline {
  position: absolute;
  top: calc(100% + 1px); /* 相对于按钮底部定位，比硬写6rem更灵活 */
  left: 50%;
  transform: var(--movefar);
  overflow: clip;
  background-color: white;
  height: 1px;
  width: var(--size);
}

方案二：不调整HTML结构，利用兄弟选择器 #

通过共同父元素定义变量，再用相邻兄弟选择器在hover时修改 .underline 的样式。

修改后的CSS：

:root {
  --size: 0;
}

main {
  --movefar: translate(-50%, 0);
  /* 让main成为绝对定位元素的容器 */
  position: relative;
}

.btnLink {
  position: absolute;
  left: 50%;
  transform: var(--movefar);
}

/* hover按钮时，直接修改相邻下划线的样式 */
.btnLink:hover + .underline {
  width: 500px;
  transform: var(--movefar);
}

.underline {
  position: absolute;
  top: calc(6rem + 1px);
  left: 50%;
  overflow: clip;
  background-color: white;
  height: 1px;
  width: var(--size);
}

如果坚持要用变量控制，也可以把 --size 定义在 main 上，用 :focus-within 模拟hover触发（注意：鼠标停留在main区域但离开按钮时，下划线宽度不会恢复）：

:root {
  --size: 0;
}

main {
  --movefar: translate(-50%, 0);
  position: relative;
}

/* 当按钮被hover或聚焦时，修改main的--size变量 */
main:focus-within {
  --size: 500px;
}

.btnLink {
  position: absolute;
  left: 50%;
  transform: var(--movefar);
  /* 移除默认聚焦轮廓 */
  outline: none;
}

.underline {
  position: absolute;
  top: calc(6rem + 1px);
  left: 50%;
  transform: var(--movefar);
  overflow: clip;
  background-color: white;
  height: 1px;
  width: var(--size);
}

内容的提问来源于stack exchange，提问作者Slothscript