CSS - Middle line

by katalin_2003

HTML

<div id="mata">
  <ul id="spn">
    <li class="active">TILE</li>
    <li>TILE</li>
    <li>TILE</li>
  </ul>
</div>

CSS

#mata {
  position: relative;
  font-family: sans-serif;
  text-align:center;
  background-color: #252830;
  color: #FFFFFF;
  padding: 1em;
}

#mata::before {
    position: absolute;
    top: 50%;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #434857;
}

#mata::after {
  box-sizing: border-box;
}

#spn {
  margin: 0;
  list-style: none;
  display: inline-block;
  position: relative;
  background-color: #252830;
  color: #FFFFFF;
  padding: 0;
  z-index: 2;
}

#spn>li {
  float: left;
  padding: 0.5em;
  border-radius: 4px;
}

#spn>li:hover {
  background-color: #434857;
  color: #CFD2DA;
}

.active {
  background-color: #1CA8DD;
  color: #252830;
}