Is it possible to somehow change the part of the border when you hover over the element. Like this: enter image description here

I tried to do this:

.nav-menu { margin-top: 33px; border-top: 1px solid #ececec; } nav a { padding: 0 20px; border-right: 1px solid #ececec; } nav a:hover { color: #f03c3c; padding-top: 25px; border-top: 1px solid #f03c3c; } 
 <div class="nav-menu"> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav> </div>

    1 answer 1

    Specifically, the border will not work without add. wrappers, but can be made using a pseudo-element.

     .nav-menu { margin-top: 33px; border-top: 1px solid #ececec; } nav a { padding: 0 20px; border-right: 1px solid #ececec; display: inline-block; position: relative } nav a:hover { color: #f03c3c; } nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 2px; background-color: #f03c3c; } 
     <div class="nav-menu"> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav> </div>