如何为计算器input的文本值设置自定义下划线（仅用CSS）

我来帮你搞定这个计算器input文本下划线的问题！针对你遇到的text-decoration下划线太粗太近、border-bottom会铺满整个input宽度的问题，这里有两个纯CSS的解决方案，完全不用JavaScript：

方案1：调整原生下划线属性（最简单） #

现代浏览器都支持text-decoration-thickness和text-underline-offset这两个属性，直接用它们就能调整原生下划线的粗细和与文本的距离，而且下划线只会跟着文本走，不会铺满整个input宽度：

.calc__total-cost {
  font-size: 56px;
  font-weight: 700;
  width: 200px;
  height: 60px;
  background: transparent;
  color: #efae02;
  text-align: right;
  /* 自定义下划线样式 */
  text-decoration: underline #efae02;
  text-decoration-thickness: 2px; /* 这里改粗细，按需调整 */
  text-underline-offset: 6px; /* 这里改和文本的距离，自己调舒服的数值 */
}

这个方案不用改任何HTML结构，直接改CSS就行，兼容性也够好，Chrome、Firefox、Safari 15.4+、Edge这些主流浏览器都支持。

方案2：用背景渐变模拟下划线（更灵活） #

如果你需要更精细的控制，比如下划线的长度比例、甚至是渐变效果，就用线性渐变来模拟：

.calc__total-cost {
  font-size: 56px;
  font-weight: 700;
  width: 200px;
  height: 60px;
  background: transparent;
  color: #efae02;
  text-align: right;
  /* 用渐变画下划线 */
  background-image: linear-gradient(to right, #efae02 0%, #efae02 100%);
  background-position: bottom right; /* 和文本右对齐保持一致 */
  background-size: 70% 2px; /* 第一个值是下划线宽度（对应你说的文本占input的70%），第二个是粗细 */
  background-repeat: no-repeat;
  padding-bottom: 4px; /* 可选，微调文本和下划线的距离 */
}

你可以根据实际显示的文本长度，微调background-size里的百分比数值，确保下划线刚好覆盖文本。这个方案兼容性更广，只要支持CSS渐变的浏览器都能用。

两种方案都能满足你的需求：下划线只覆盖文本、粗细和距离可自定义，完全不用JS～

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