HTML – 我的自动下划线脚本有什么问题？

我想使用 Tobias Ahlin’s script来设置输入框的样式.虽然它完全适用于段落,但输入却没有.此外,::之前没有出现在旁观者中.

这是我的代码：

.edit input {
    text-decoration: none;
    outline: none;
    border: none;
    position: relative;
    font-size: 1.125rem;
}

.edit input::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.15s ease-in-out 0s;
}
.edit input:active::before, .edit input:focus::before {
    visibility: visible;
    transform: scaleX(1);
}

<div class="edit">
  <input type="text" maxlength="15" value="Some content here...">
</div>

我在Angular 5应用程序中使用它,但我认为它现在不相关.

问题是输入和其他表单元素不呈现：before和：after伪元素.

Authors specify the style and location of generated content with the
:before and :after pseudo-elements. As their names indicate, the
:before and :after pseudo-elements specify the location of content
before and after an element’s document tree content. The ‘content’
property, in conjunction with these pseudo-elements, specifies what is
inserted.

W3 Specs

因此,将输入包装在跨度中将使此工作：

<div class="edit">
  <span><input type="text" maxlength="15" value="Some content here..."></span>
</div>

CSS …请注意.edit span :: before bottom：-2px与你的代码不同.

span {
  position: relative;
}

.edit input {
    text-decoration: none;
    outline: none;
    border: none;
    position: relative;
    font-size: 1.125rem;
}

.edit span::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #000;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.15s ease-in-out 0s;
}
.edit span:hover::before {
    visibility: visible;
    transform: scaleX(1);
}