Border-like Übergang verursacht Inhalt zu verschieben

Question

Titel ziemlich fasst es zusammen, hier ist eine Demonstration und die CSS so weit.

.edit.input { 
 
    display: inline-block; 
 
} 
 

 
.edit.input input { 
 
    border: none; 
 
    border-bottom: 1px solid #D4D4D5; 
 
} 
 

 
.edit.input input:focus { 
 
    outline: none; 
 
    border: transparent; 
 
} 
 

 
.bar { 
 
    display: block; 
 
} 
 

 
.bar:after { 
 
    content: ''; 
 
    display: block; 
 
    transform: scaleX(0); 
 
    bottom: -2px; 
 
    height: 2px; 
 
    background: #48afb9; 
 
    transition: 300ms ease all; 
 
} 
 

 
.edit.input input:focus ~ .bar:after { 
 
    transform: scaleX(1); 
 
}

<div class="edit input"> 
 
    <input type="text"> 
 
    <span class="bar"></span> 
 
</div> 
 

 
<br> 
 
<br> stuff 
 
<br> other stuff

https://jsfiddle.net/a554h0oo/

Was ich zu erreichen versuche:

Dies ist, was ich bekommen:

Answer 1

Wenn Sie border: transparent einstellen, setzen Sie die Rahmenbreite oben auf 1 zurück.

Set border-color statt

.edit.input { 
 
    display: inline-block; 
 
} 
 

 
.edit.input input { 
 
    border: none; 
 
    border-bottom: 1px solid #D4D4D5; 
 
} 
 

 
.edit.input input:focus { 
 
    outline: none; 
 
    border-color: transparent; /* changed */ 
 
} 
 

 
.bar { 
 
    display: block; 
 
} 
 

 
.bar:after { 
 
    content: ''; 
 
    display: block; 
 
    transform: scaleX(0); 
 
    bottom: -2px; 
 
    height: 2px; 
 
    background: #48afb9; 
 
    transition: 300ms ease all; 
 
} 
 

 
.edit.input input:focus ~ .bar:after { 
 
    transform: scaleX(1); 
 
}

<div class="edit input"> 
 
    <input type="text"> 
 
    <span class="bar"></span> 
 
</div> 
 

 
<br> 
 
<br> stuff 
 
<br> other stuff

Answer 2

diesen Code versuchen.

<style type="text/css"> 
    .edit.input { 
     display: inline-block; 
    } 

    .edit.input input { 
     border: none; 
     border-bottom: 1px solid #F312FE; 
    } 

    .edit.input input:focus { /* virtual selecter */ 
     outline: none; 
     border-color:transparent; 
    } 

    .bar:after { /* virtual selecter */ 
     content: ''; 
     display: block; 
     transform: scaleX(0); /* width * 0 */ 
     bottom: -2px; 
     height: 2px; 
     background: #48afb9; 
     transition: 300ms ease all; 
    } 

    .edit.input input:focus ~ .bar:after { 
     transform: scaleX(1); /* animation speed : 1 */ 
    } 
} 
</style> 
<div class="edit input"> 
<input type="text"> 
    <div class="bar"> 
    </div> 
</div>