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

相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...