rndm rndm - 2 months ago 8
CSS Question

Expanding border bottom with focus on text input

I can't figure out how to make something like this but without using div. I would like to get same effect using only input and instead of

hover
I would like to use
focus
. The way I'm doing this with
div
doesn't work on
input
.

Update:
I would like to make this
border-bottom
still visible when
input
is on
focus
even with using
div
.



.expand input {
background: #eee;
padding: 10px;
border: none;
}

.expand {
display: inline-block;
}

.expand:after {
display: block;
content: "";
border-bottom: 3px solid #2bcf67;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0% 50%;
}

.expand:hover:after {
transform: scaleX(1);
}

<div class="expand">
<input type="text" name="" id="" placeholder="Your text">
</div>




Answer

Pseudo-elements are only supported on container elements. Because the way they are rendered are within the container itself as a child element. input cannot contain other elements hence they're not supported.

Here is the W3C specification for how to use Pseudo-elements

Comments