Можно ли сделать кривую линию, когда вы что-то наводите?

#html #css

Вопрос:

Я хочу, чтобы кривая линия зависала в CSS, когда вы что-то наводите

       <style>
          
          .Exp{
          font-size:50px;
          text-align:center;
          }
          
          .Exp:hover {
            background:brown;
            color:white;
            }
            
        </style>   
       
           
                <div class="Exp">Blog</div>
              

Вот так
Проверьте изображение

возможно ли это или нет в CSS?

Ответ №1:

Желаемого эффекта можно достичь, наложив div на текст круг с небольшой рамкой внизу и развернув его при наведении курсора

 <style>
   .arc {
       display: none;
       position: absolute;
       width: 2em;
       height: 2em;
       border-radius: 50%;    /* make it circular */
       background-color: transparent;
       border-bottom: 3px solid brown;  /* the arc effect */
   }
   .exp {
       font-style: italic;
   }
   .wrapper:hover > .arc {
       display: block;
   }
</style>
<div class="wrapper">
    <div class="arc"></div>
    <div class="exp">Blog</div>
</div>
 

Комментарии:

1. Спасибо, для меня это работает. Я отредактирую его в соответствии со своими требованиями