can you count the letter "l" in:
q: активный блок с сылкой есть html-код: 
<div class="header__menu">
    <nav class="header__nav">
        <ul class="header__nav__list">
         <li class="nav__item"><a href="#" class="nav__link">вопрос/ответ</a></li>
        <li class="nav__item"><a href="#" class="nav__link">инструкция</a></li>
        <li class="nav__item"><a href="#" class="nav__link">тикеты</a></li>
        </ul>
    </nav>
</div>

подскажите как реализовать с помощью css или js, чтобы было как на картинке:


a: приблизительно так


.header__nav__list {
  width: 600px;
}
.header__nav__list > li {
  background: #e0e0e0 none repeat scroll 0 0;
  box-shadow: -25px 0 10px -15px rgba(0, 0, 0, 0.25) inset, 60px 0 100px -90px #000000;
  float: left;
  font-style: italic;
  height: 40px;
  line-height: 40px;
  list-style: outside none none;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}
.header__nav__list > li:nth-of-type(2) {
  background: #f2f2f2 none repeat scroll 0 0;
  box-shadow: -25px 0 10px -15px rgba(0, 0, 0, 0.15) inset, 60px 0 100px -90px #000000;
}
.header__nav__list > li:nth-of-type(3) {
  background: #fafafa none repeat scroll 0 0;
  box-shadow: 0 0 0;
}
.header__nav__list > li:nth-of-type(3) > a {
  color: #0081ff;
}
.header__nav__list > li > a {
  text-decoration: none;
  color: grey;
}
<div class="header__menu">
  <nav class="header__nav">
    <ul class="header__nav__list">
      <li class="nav__item"><a href="#" class="nav__link">вопрос/ответ</a>
      </li>
      <li class="nav__item"><a href="#" class="nav__link">инструкция</a>
      </li>
      <li class="nav__item"><a href="#" class="nav__link">тикеты</a>
      </li>
    </ul>
  </nav>
</div>



a: надеюсь, это вам поможет. все же, искренне желаю подобрать более стильный и современный вариант меню.
если разные оформления ссылок являются разными состояниями пунктов меню - им должны присваиваться дополнительные уникальные классы. только после этого можно их кастомизировать.
кодперо


@import url(https://fonts.googleapis.com/css?family=lobster&subset=latin,cyrillic);
* {
  box-sizing: border-box;
}

body {
  background: #f9f9f9;
  font: 20px/1.2 lobster;
}

a.nav__link {
  text-decoration: none;
  color: #666;
}

.header__menu {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
}

nav.header__nav {
  margin: 0 auto;
  display: inline-block;
  width: 900px;
    height: 60px;
  overflow: hidden;
}
ul.header__nav__list {
    margin: 0;
    padding: 0;
}
li.nav__item {
    display: block;
    float: left;
    height: 60px;
    line-height: 60px;
    background: #f9f9f9;
    width: calc(100% / 3);
}

li.nav__item:first-child {
  background: #ccc;
}

li.nav__item:nth-child(2) {
  background: #eee;
  box-shadow: -8px 2px 19px -1px rgba(0, 0, 0, 0.5);
}

li.nav__item:nth-child(3) {
  background: #f9f9f9;
  box-shadow: -8px -6px 20px 0 rgba(0, 0, 0, 0.3);
}

li.nav__item:nth-child(3) a {
  color: darkblue;
}
<div class="header__menu">
  <nav class="header__nav">
    <ul class="header__nav__list">
      <li class="nav__item"><a href="#" class="nav__link">вопрос/ответ</a></li>
      <li class="nav__item"><a href="#" class="nav__link">инструкция</a></li>
      <li class="nav__item"><a href="#" class="nav__link">тикеты</a></li>
    </ul>
  </nav>
</div>



user
In the text, there are one hundred and twenty-seven "l"s.
assistant