JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="row">
  <div class="col-12">
    <div class="menu">
      <nav class="menu__nav">
        <a class="menu__item" href="#">Каталог</a>
        <a class="menu__item" href="#">Акции</a>
        <a class="menu__item" href="#">Адрес</a>
      </nav>
    </div>
  </div>
  </div>
</div>

SCSS

.menu {
	height: 40px;
	background-color: #50b319;
	margin: 0 -15px;
	padding-left: 20px;
	background-image: linear-gradient(to top, rgba(35, 31, 32, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.23);

	&__nav {
		font-size: 0;
	}

	&__icon {
		width: 18px;
		height: 18px;
		float: left;
		margin-top: 11px;
		margin-right: 5px;
		fill: #fff;
	}

	&__item {
		display: inline-block;
		font-weight: 700;
		font-size: 14px;
		color: #fff;
		line-height: 40px;
		margin: 0;
		padding: 0 30px;
		text-transform: uppercase;
		height: 100%;
		position: relative;
		left: 0;
		transition: all 0.4s;

		&:after {
			content: '';
			height: 14px;
			width: 2px;
			background-color: #429017;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
		}

		&:hover {
			background-color: #429017;
      position:relative;
      margin-left:-2px;
      padding-left: 32px;
			&:after {
				width: 0;
			}
		}

		&:last-child {
			&:after {
				content: none;
			}
		}
	}
}