<div class="contain">
    <div class="item example-9">
      <ul class="first">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

      <ul class="list-1 list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

      <ul class="list-2 list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

      <ul class="list-3 list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

      <ul class="list-4 list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

      <ul class="list-5 list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

/*...... Demo Styles ........*/
.example-9 {
	ul {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	li {
		position: relative;
		width: 100%;
		height: 50px;
		margin-right: -1px;
	}

	ul {
		li:first-child {
			background: #06AED5;
		}

		li:nth-child(2) {
			background: #086788;
		}

		li:nth-child(3) {
			background: #F0C808;
		}

		li:nth-child(4) {
			background: #FFF1D0;
		}

		li:last-child {
			background: #DD1C1A;
		}
	}

	.list li {
		&:after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(#000, 0.1);
		}
	}

	.list-1 li {
		&:after {
			background: rgba(#000, 0.2);
		}
	}

	.list-2 li {
		&:after {
			background: rgba(#000, 0.3);
		}
	}

	.list-3 li {
		&:after {
			background: rgba(#000, 0.4);
		}
	}

	.list-4 li {
		&:after {
			background: rgba(#000, 0.5);
		}
	}

	.list-5 li {
		&:after {
			background: rgba(#000, 0.6);
		}
	}
}

/*...... General Styles ........*/

body {
	font-family: 'Arial';
  line-height: 1.4;
}

.contain {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.off-screen {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
}

* {
	box-sizing: border-box;
}

code {
	background: rgba(lightgrey, 0.5);
	display: inline-block;
	padding: 5px;
}