<label for="inp" class="inp"> <input type="text" id="inp" placeholder=" "> <span class="label">Label</span> <svg width="120px" height="26px" viewBox="0 0 120 26"> <path d="M0,25 C21,25 46,25 74,25 C102,25 118,25 120,25"></path> </svg> <span class="border"></span> </label>
![このCSSアニメーションのアイデアすごい!CSSの疑似クラスで実装するフローティングラベル](https://cdn-ak-scissors.b.st-hatena.com/image/square/0584de1c8dea93ccba1ec073fdd54cfa014c2045/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018071906.gif)