css lable下划线 |css 导入样式表

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

上面的代码是一个简单的label标签，但是没有下划线效果。下面大家来看一种基于border-bottom属性实现下划线效果的方法：

label {
display: inline-block;
border-bottom: 2px solid #333;
padding-bottom: 2px;
}

上面的代码使用了border-bottom属性来制作下划线效果，同时为label标签设置了display:inline-block属性，使其能够在一行内显示。

如果大家希望在鼠标悬停在label标签上时出现下划线滑动效果，可以添加以下CSS样式：

label:hover {
border-bottom: 2px solid blue;
transition: border-bottom 0.3s ease;
}

添加了:hover伪类后，大家将border-bottom的颜色改为了蓝色，并添加了过渡效果，使下划线滑动更加柔顺。

总之，label标签下划线可以使大家的表单元素更加美观和易于使用。掌握好下划线的制作方法，可以轻松优化表单页面。