CSS :before for small line

I trying to create input, that has border-bottom and small (in height) borders in sides like that: Example 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>

TAGS