<分区>
<分区>
input::before 元素未显示。我不确定为什么:
input::before {
content: "this is before";
position: absolute;
}
body {
background-color: Royalblue; /*#f0f0f0;*/
margin: 0px;
}
form {
position: relative;
top: 90px;
margin: 0 auto;
width: 280px;
height: 340px;
border: 1px solid #B0C4DE;
background: royalblue;
border-radius: 0px;
border-radius: 10px 10px 10px 10px;
}
/* Main EFFECT ================================ */
input {
position: relative;
top: 0px;
left: 0px;
font-family: 'Montserrat', sans-serif;
border: 0;
border-bottom: 1px solid black;
background: transparent;
font-size: 15px;
height: 25px;
width: 180px;
outline: 0;
z-index: 1;
color: black;
}
span {
position: absolute;
top: 7px;
left: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
/* z-index: 1; */
color: white;
transition: top .5s ease, font-size .5s ease;
}
input::before {
content: "this is before";
position: absolute;
}
.child {
position: relative;
width: 65%;
top: 30px;
margin: 0 auto;
/* margin-bottom: 30px;*/
}<body>
<form class="parent">
<div class="child">
<input type="text" id="username" required />
<span>Username</span>
</div>
</form>
</body>最佳答案
我的理解:输入是 replaced元素。替换是指内容被浏览器的默认小部件(此处为文本框)替换。
您可以使用包装元素解决此问题 <input/> .这是一个例子和它的 fiddle 。
HTML
<span class="input-container">
<input type="text" id="username" required />
</span>
CSS
span.input-container:before {
content: "|";
border: 1px solid blue;
}
请更改值以适合您的风格。
fiddle :https://jsfiddle.net/4csrwy0f/7/
关于html - input::before 元素不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52397482/