I want to make a simple input that when you focus on it a nice border appears from the bottom center of it with some transition:
<form method="POST" action="/admin/add-product" class="add-product">
<div class="form-input">
<label for="title">title</label>
<input type="text" name="title" id="title" placeholder="title">
</div>
<button className="btn btn-green">Add product</button>
</form>
\* some basic styling for the form *\
.add-product {
width: 500px;
max-width: 95%;
margin: 3rem auto;
padding: 2rem;
}
\* .form-input contains the input and the label *\
.form-input {
width: 100%;
position: relative;
}
.form-input input,
.form-input label {
display: block;
width: 100%;
margin-bottom: 1rem;
}
.form-input input {
height: 2rem;
background: transparent;
border: transparent;
}
\* the ::after *\
.form-input::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 0%;
background-color: var(--green);
transition: width 0.6s;
}
\* this where I think I made a mistake these changes are not applied to ::after at :focus *\
.form-input input:focus + ::after {
width: 100%;
}
I expected to see the ::after element's width to change but it doesn't so I think there is a mistake in selecting this way .form-input input:focus + ::after; even though I think there is no