CSS :before for small line
I trying to create input, that has border-bottom
and small (in height) borders in sides like that:
But this code didn't work:
input:before, input:after {
display: block;
height: 5px;
width: 1px;
background: #f00;
}
Answers:
The problem is that the ::after
pseudo element puts the pseudo element inside the element that you select that, so an input can't have ::before
or ::after
.
Secondly the pseudo element normally requires content:" ";
Here is a working example
<!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>