Such a task:

When you hover over the link a , the visibility the hr line should change from hidden to visible

 .portfolio__nav__block a { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 14px; text-transform: uppercase; text-decoration: none; color: #4a4a4a; margin: 50px 10px 0 10px; text-align: center; } .portfolio__nav__block hr { width: 80px; height: 2px; background: #f4511e; border: none; visibility: hidden; } .portfolio__nav__block a:hover .portfolio__nav__block hr { visibility: visible; } 
 <div class="portfolio__nav__block"> <a href="#">All projects</a> <hr> </div>

  • Is it possible in more detail? .. This task should be implemented by means of CSS? Is the layout exactly the same as in your example? (Please write all the additional information in the question directly) - Mikhail Rebrov
  • I'm sorry, yes, by CSS. Regarding the layout - the code that in the example - I see this button. Perhaps this is the wrong option, although the answer has already been given, and the code has earned. - Bogdan Tsokalo

1 answer 1

 .portfolio__nav__block a { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 14px; text-transform: uppercase; text-decoration: none; color: #4a4a4a; margin: 50px 10px 0 10px; text-align: center; } .portfolio__nav__block hr { width: 80px; height: 2px; background: #f4511e; border: none; visibility: hidden; } .portfolio__nav__block a:hover ~ hr { visibility: visible; } 
 <div class="portfolio__nav__block"> <a href="#">All projects</a> <hr> </div>