gpt4 book ai didi

CSS :before for small line

转载 作者:太空宇宙 更新时间:2023-11-03 23:48:06 25 4
gpt4 key购买 nike

我试图创建输入,它在两侧具有 border-bottom 和小(高度)边框,如下所示: Example但是这段代码不起作用:

input:before, input:after {
display: block;
height: 5px;
width: 1px;
background: #f00;
}

最佳答案

问题是 ::after 伪元素将伪元素放在您选择的元素内,因此输入不能有 ::before::之后

其次,伪元素通常需要 content:"";

这是一个工作示例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.input input {
font-size:20px;
}
.input {
border:none;
display:inline-block;
border-bottom:solid red 1px;
}
.input:before, .input:after {
content:" ";
display: inline-block;
vertical-align:bottom;
height: 5px;
width: 1px;
background: #f00;
}
</style>
</head>
<body>
<div class="input">
<input value="Text" />
</div>
</body>
</html>

关于CSS :before for small line,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21061525/

25 4 0