Javascript 设置文本的边框，而不是输入字段

我有一个

输入

字段，我想在文本上做一个悬停效果：当鼠标在文本上时，使其底部边框色彩鲜艳

下面的代码使整个输入字段的底部边框颜色鲜艳

以下代码适用于不是

输入的
值2

有人知道如何处理输入中的文本而不是输入字段吗



输入{
字体大小：20px；
边界：无；
显示：内联块；
背景色：透明；
}
.项目{
字体大小：20px；
显示：内联块；
}
输入：悬停，。项目：悬停{
边框底部：2个实心#42b983；
}


{{value2}}
var-app=angular.module（'app'，[]）；
app.controller（'Ctrl'，['$scope'，函数（$scope）{
$scope.value1=“value1”；
$scope.value2=“value2”
}])
代替
边框底部
，您可以使用：

 input:hover {
  text-decoration: underline;
  -webkit-text-decoration-color: red;
  -moz-text-decoration-color: red;
  text-decoration-color: red;
}

请注意，浏览器支持是有限的。
见：
为什么颜色总是
黑色
？在Chrome和Firefox上，当我看到你用我添加的东西摆弄时，它是红色的。它需要一个“是”，我刚刚看到最新版本中为Chrome添加了支持。该页面将是公开的，我将无法更改访问者的设置，因此此
文本装饰颜色
解决方案不适合我的情况。。。
 input:hover {
  text-decoration: underline;
  -webkit-text-decoration-color: red;
  -moz-text-decoration-color: red;
  text-decoration-color: red;
}

input:hover {
    text-decoration: underline;
    -moz-text-decoration-color: #42b983; /* Code for Firefox */
    text-decoration-color: #42b983;
}