如何用基于宽度的公式替换CSS transform rotate的固定值？

我实现了一个自定义下划线效果，通过transform: skew(-30deg) rotate(-2deg);样式做出倾斜效果。但由于文本内容和字体可能随时变化，无法提前获知元素的实际宽度，想把rotate属性里的固定值-2deg替换成类似[元素宽度（像素）] * 0.004 - 2.4的动态计算公式。相关SCSS代码如下：

.underlined {
  $lineColor: #4ffe25;
  position: relative;
  z-index: 2;
  &::before {
    background-color: $lineColor;
    content: "";
    position: absolute;
    width: calc(99% + 0px);
    height: 15%;
    left: 0;
    top: 95%;
    z-index: -1;
    transform: skew(-30deg) rotate(-2deg); /* 如何在这里用基于宽度的计算公式？ */
  }
}

解决方案 #

SCSS是预编译工具，编译阶段无法获取元素在浏览器中渲染后的实际宽度，所以需要结合CSS变量和JavaScript来实现动态计算：

1. 修改SCSS代码，引入CSS变量 #

把固定的旋转角度换成自定义CSS变量，保留默认值作为降级方案：

.underlined {
  $lineColor: #4ffe25;
  position: relative;
  z-index: 2;
  --rotate-angle: -2deg; /* 默认旋转角度 */
  &::before {
    background-color: $lineColor;
    content: "";
    position: absolute;
    width: calc(99% + 0px);
    height: 15%;
    left: 0;
    top: 95%;
    z-index: -1;
    transform: skew(-30deg) rotate(var(--rotate-angle));
  }
}

2. 用JavaScript计算并设置变量 #

通过JS获取元素的实际宽度，代入公式计算旋转角度，再赋值给CSS变量：

// 初始化计算所有目标元素的旋转角度
function updateUnderlineRotate() {
  document.querySelectorAll('.underlined').forEach(element => {
    const elementWidth = element.offsetWidth;
    const calculatedAngle = `${elementWidth * 0.004 - 2.4}deg`;
    element.style.setProperty('--rotate-angle', calculatedAngle);
  });
}

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', updateUnderlineRotate);

// 监听窗口大小变化，实时更新角度
window.addEventListener('resize', updateUnderlineRotate);

补充说明 #

如果页面中有动态加载的文本（比如异步请求内容、用户输入修改文本），需要在内容更新后手动调用updateUnderlineRotate()函数，确保下划线角度能同步更新。

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