Underline Input

1<template>
2  <div class="ul">
3    <input v-model="val" type="text" placeholder="Dein Name" />
4    <span class="bar"></span>
5  </div>
6</template>
7<script>
8export default { data: () => ({ val: '' }) }
9</script>
10<style>
11.ul{position:relative;width:280px;font-family:system-ui}
12.ul input{width:100%;padding:10px 2px;border:0;border-bottom:1px solid rgba(255,255,255,.2);
13  background:none;color:#fff;font-size:16px;outline:none;box-sizing:border-box}
14.ul input::placeholder{color:rgba(255,255,255,.4)}
15.bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
16  background:linear-gradient(90deg,#8b5cf6,#06b6d4);transition:transform .3s ease}
17.ul input:focus~.bar{transform:scaleX(1)}
18</style>