老师，这个为什么不可以直接修改label内容而需要使用after
来源：4-10 编程练习
拾梦者sdj
2019-04-21 22:31:29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.container {
height:24px;
position:relative;
padding-left:40px;
}
input {
height:18px;
border-radius:4px;
text-indent:36px;
transition:all 0.5s; /*过渡*/
}
span {
font-size:14px;
line-height:14px;
position:absolute;
top:6px;
left:48px;
transition:all 0.5s; /*过渡*/
}
/*鼠标移上去或者获得焦点、在此处填写代码*/
input:focus,input:hover{
text-indent:2px;
}
input:focus+span,input:hover+span {
left:10px;
}
/*符合验证的label、在此处填写代码*/
input:valid~label:after{
content:"你邮箱正确！";
}
/*不符合验证的label、在此处填写代码*/
input:invalid~label:after{
content:'你邮箱错误！';
}
</style>
</head>
<body>
<div class="container">
<input type="email" placeholder="请输入邮箱" required>
<span>邮箱</span>
<label></label>
</div>
</body>
</html>
1回答
-
樱桃小胖子
2019-04-22
修改内容需要使用content:""而这个content:""需要结合伪元素:before、:after使用。
希望可以帮到你！
0
相似问题
回答 1