html - 我的自动下划线脚本有什么问题？

Question

我想使用 Tobias Ahlin's script设计我的输入框。但是，虽然它在段落上工作得很好，但在输入上却没有。此外，::before 不会出现在旁观者中。

这是我的代码:

.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 应用程序中使用它，但我认为它现在不相关。

Answer 1

问题是 input 和其他表单元素不呈现 :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

因此将 input 包装在 span 中将使它起作用:

<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);
}