Input border styling

by polaszk

HTML

<label for="name">Name</label>
<div class="awesome-border">
  <input type="text" id="name">
  <span class="border"><i></i></span>
</div>

CSS

.awesome-border {
  position: relative;
  width: 50%;
}

.awesome-border input {
  display: block;
  outline: none;
  padding: 15px;
  width: calc(100% - 32px);
  border: 1px solid #ddd;
}

.awesome-border input~.border:before,
.awesome-border input~.border:after,
.awesome-border input~.border i:before,
.awesome-border input~.border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
}

.awesome-border input~.border:before,
.awesome-border input~.border:after {
  width: 0;
  height: 1px;
  transition: 0.3s;
}

.awesome-border input~.border i:before,
.awesome-border input~.border i:after {
  width: 1px;
  height: 0;
  transition: 0.4s;
}

.awesome-border input~.border:after,
.awesome-border input~.border i:after {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
}

.awesome-border input:focus~.border:before,
.awesome-border input:focus~.border:after {
  width: 100%;
  transition: 0.3s;
}

.awesome-border input:focus~.border i:before,
.awesome-border input:focus~.border i:after {
  height: 100%;
  transition: 0.4s;
}