フォーカス時に下線が中央から引かれるinput要素
「span」タグを追加して下線を引くアニメーションにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
padding: 0 4rem;
box-sizing: border-box;
background-color: #fefefe;
}
.underline-box {
position: relative;
width: 100%;
}
.underline-input {
padding: .5rem 0;
width: 100%;
outline: 0;
border: transparent;
border-bottom: 1px solid #cdcdcd;
background-color: transparent;
color: #495057;
font-size: .875rem;
font-weight: 400;
line-height: 1.4rem;
box-sizing: border-box;
appearance: none;
}
/* 赤い下線の設定 */
.underline-input+span {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
/* 下線を隠す */
height: 2px;
background-color: #e14060;
transition: .3s;
transform: translateX(-50%);
}
/* フォーカス時 */
.underline-input:focus+span {
width: 100%;
/* 下線を表示 */
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 450px; height: 253.125px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<div class="underline-box">
<input type="text" placeholder="名前" class="underline-input">
<span></span>
</div>
</div>
</body></html>