JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<ul class="example">
    <li><a href="#">пункт 1</a></li>
    <li><a href="#">пункт 2</a></li>
    <li><a href="#">пункт 3</a></li>
</ul>

CSS

/* Облегчённая тестовая версия для отлова "просвечивания" фона через overflow при переходах в Хроме и "полосок перед полосками" в Лисе */
.example
      {
          background: 
                linear-gradient(#ecc, #fff8f8);
          font-size: 0;
          padding: 0;
          margin: 20px 25px;
          border: 1px solid #825;
          border-radius: 0 0 20px 20px;
          overflow: hidden;
      }
.example > *
      {
          font-size: 16px;        
      }
.example li, .example li a
      {
        position: relative; /* для свободного задания position-absolute для потомков, а также свободных манипцляций с z-index */
      }
.example li
      {
          list-style: none;
      }
.example > li
      {
          display: inline-block;
          padding: 0 20px;
          left: 10px;        /* каждый пункт, начиная с первого, сдвинут на одну полоску. поскольку с другой стороны, за пределы пункта выходит ещё одна полоска, то в результате, в многострочном режиме при изменении размеров окна две полоски могут вылезти за правый край меню */
      }
.example li a
      {
			    text-decoration: none;
		    	display: block;
      }
.example > li > a
      {
          line-height: 50px;
          text-align: center;
          color: #7c3c3c;
          z-index: 0;
          transition: color 1s ease,
                      z-index 1s step-end;
      }
.example > li:hover > a
      {
        	color: #ca575b;
          z-index: 2;
          transition: color 1s ease,
                      z-index 1s step-start;
      }
.example > li::after, .example > li::before   /*заготовки для фона*/
      {
        content:'';
        display: block;
        position: absolute;
        top: 0;
        left: -10px; padding: 0 10px;
        width: 100%;
        height: 100%;
      }
.example > li::after       /*полоски*/
      {
        background:
                linear-gradient(to right, #fff 10px, #dedede 10px, #dedede 20px, transparent 20px),
               ...