html - 如何在输入值下方画线并装饰这条线

Question

我需要在 input 中显示表达式值的文本下划线(我正在制作一个计算器)。
如果我使用 text-decoration: underline 线条太粗并且太靠近文本。

我需要像这样画线。行应仅在文本下划线，而不是整个输入。

我使用固定的 width: 200px 进行输入(最大值可以是五位或六位)。如果我不设置 width 输入占用 100% 的可用空间。因此我们不能使用 border-bottom 因为行有 width 像输入一样，但是文本有大约 70% 的输入 width 并且我们'我会得到这样的东西 .

如果可能的话，我们不应该使用 JavaScript，而应该只使用 CSS。

JSFiddle

.calc__total-cost {
  font-size: 56px;
  font-weight: 700;
  width: 200px;
  height: 60px;
  background: transparent;
  color: #efae02;
  text-align: right;
  text-decoration: underline;
  }

    <div class="calc__total">
      <input type="text" class="calc__total-cost" id="calc__total-cost-value" value="5000">
      </div>

Answer 1

你可以这样使用:

.calc__total-cost{
  border: none;
}
.calc__total-cost:active, .calc__total-cost:focus{
  border: none;
  outline: none;
}
.calc__total{
  position: relative;
}
.calc__total:after{
  position: absolute;
  width: 35px;
  height: 1px;
  background: #333;
  content: '';
  left:0;
  bottom: 0;
}

    <div class="calc__total">
      <input type="text" class="calc__total-cost" id="calc__total-cost-value" value="5000">
      </div>