Я не совсем уверен, что вы строите, но вот предположение (основанное на наименовании), которое действительно упростит ваш CSS
. По сути, я изменяю вещи, чтобы зависеть от разделяемых классов, а не от c id
s.
.field .underline {
width: 0;
overflow: hidden;
transition: 100ms;
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background-color: black;
}
#registeration_form input:focus + .underline {
width: 100%;
}
.field {
display: inline-block;
position: relative;
margin-bottom: .5rem;
}
.field input {
border: 1px solid #eee;
padding: .5rem 1rem;
}
<form id="registeration_form">
<div class="field">
<input placeholder="Enter Name" aria-label="enter name" type="text" class="input" id="name" name="name">
<span role="presentation" class="underline"></span>
</div>
<div class="field">
<input placeholder="Enter Username" aria-label="enter username" type="text" class="input" id="username" name="username">
<span role="presentation" class="underline"></span>
</div>
<div class="field">
<input placeholder="Enter Email" aria-label="enter email" type="text" class="input" id="email" name="email">
<span role="presentation" class="underline"></span>
</div>
</form>
jsFiddle