How to create line hover effect with CSS

When we use hover on any element or any anchor button then required that should be feeling a movement then you will know that something happens. Hover effect you can change border color or background color or something change any numeric value as default color "red" and after hover, the color should be "blue". It's so simple we will use ": hover" CSS selector. And if you want to get something different effect as "Line effect" then it's required "CSS after" or "CSS before" selector.

As given below example:

Code demo

<style>

            .anythingHover{ max-width:800px; margin:50px auto;}

            .anythingHover ul{ list-style:none; display:inline-block;}

            .anythingHover ul li{ display:inline-block;}

            .anythingHover ul li a{ color:#555; padding:5px 15px; text-decoration:none; font-family:arial; position:relative;}

            .anythingHover ul li a:after{ position:absolute; width:0; height:3px; background:#0bf; bottom:0; left:0; content:''; transition:all 0.2s}

            .anythingHover ul li a:hover:after{ width:100%; transition:all 0.2s}

           

            .anythingCenterToOut { text-align: center;}

            .anythingCenterToOut a{ color:#555; padding:5px 15px; text-decoration:none; font-family:arial; position:relative;}

            .anythingCenterToOut a:after{ position: absolute; width: 0%; height: 3px; background: #0bf; bottom: 0; left: 0;  text-align: center; right: 0; content: ''; margin: auto;

    transition: all 0.2s;}

            .anythingCenterToOut a:hover:after{ width:100%; transition:all 0.2s}

        </style>

<div class="anythingHover">

                <ul>

                    <li><a href="#">Home</a></li>

                    <li><a href="#">About</a></li>

                    <li><a href="#">Services</a></li>

                    <li><a href="#">Contact</a></li>

                </ul>

            </div>

            <br><br>

            <div class="anythingCenterToOut"><a href="#">Expand center to outside</a></div>