TODO HOVER: Crear efecto hover de resaltado bajo el texto de un elemento de menú .-

viernes, 30 de septiembre de 2022

Crear efecto hover de resaltado bajo el texto de un elemento de menú .-

Home
Trending
Subscriptions

Este efecto fue extraído de la siguiente URL: https://es.stackoverflow.com/

<ul  class="resaltado" >
   
  <li>Home</li>
   <li>Trending</li>
   <li>Subscriptions</li>
</ul></div>

<style>
resaltado{
  list-style: none;
  display: table;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  padding: 10px 10px 10px 10px;
  font-size: 20px;
  margin-left: 5px;
  transition: border-bottom 80ms;
  cursor: pointer;
}


li:hover {
  border-bottom: 7px solid rgba(255, 0, 0, 0.7);
  padding-bottom: 3px;
}
</style>