<html>
  <head>
    <title>CSS after</title>
  </head>
  <body>
    <div class="page">
      <div class="page__example">
        <nav>
          <ul>
            <li><a href="">Главная</a></li>
            <li><a href="">О проекте</a></li>
            <li><a href="">Портфолио</a></li>
            <li><a href="">Контакты</a></li>
          </ul>
        </nav>
      </div>
      <div class="page__copyright">
        Пример использования псевдоэлемента <a class="page__copyright-link" href="https://tuhub.ru/refs/css/after" target="blank" >after в CSS</a>.
      </div>
    </div>
  </body>
</html>
nav {
  width: 400px;
  background: #e5e5e5;
  border-radius: 3px;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li a {
  position: relative; 
  display: block; 
  width: 100%;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
  box-sizing: border-box;
  z-index: 2;
}
	
nav li a:hover        { border-bottom: 0px; color: #fff;}
nav li:first-child  a { border-right: 5px solid #673AB7; }
nav li:nth-child(2) a { border-right: 5px solid #3F51B5; }
nav li:nth-child(3) a { border-right: 5px solid #2196F3; }
nav li:last-child   a { border-right: 5px solid #009688; }

/* Property Example Styles */

nav li a:after { 
  content: "";
  position: absolute;
  height: 100%; 
  width: 0px; 
  right: 0; 
  top: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: all 0.2s ease 0s; 
  z-index: -1;
}

nav li a:hover:after        { width: 100%; }
nav li:first-child  a:after { background: #673AB7; }
nav li:nth-child(2) a:after { background: #3F51B5; }
nav li:nth-child(3) a:after { background: #2196F3; }
nav li:last-child   a:after { background: #009688; }

External CSS

  1. https://tuhub.ru/themes/custom/tuhub/dist/css/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.