Is it possible to make a curve line when you hover something?-CodePudding

I want to make a curve line hover in CSS when you hover something

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

      
           
                <div class="Exp">Blog</div>

Like this Check the Image

is it possible or not in a CSS?

CodePudding user response：

The effect you want can be achieved by overlaying a circular div on the text with a small border at the bottom and unhiding it upon hover

<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>