<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <span class="underline-effect mt-5">Selam Muhittin</span> <ul class="list-group w-100 mt-5"> <li class="underline-effect list-group-item disabled">Cras justo odio</li> <li class="underline-effect list-group-item"><a href="#">Dapibus ac facilisis in</a></li> <li class="underline-effect list-group-item">Morbi leo risus</li> <li class="underline-effect list-group-item">Porta ac consectetur ac</li> <li class="underline-effect list-group-item">Vestibulum at eros</li> </ul> </div> </div>

body { background-color: #464d61; } .underline-effect { position: relative; display: inline-block; color: #fff; font-weight: bold; cursor: pointer; font-size:20px; } .underline-effect::after { content: ''; position: absolute; left: 50%; /* ortadan başlat */ bottom: 0; width: 0; /* başlangıçta görünmez */ height: 2px; background-color: yellow; transition: width 0.3s ease-in-out; transform: translateX(-50%); /* ortalamak için */ } .underline-effect:hover::after { width: 100%; /* hover ile tam genişlik */ } li { background-color: gray !important; }