<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
  <li>fourth item</li>
</ul>

ul:hover > li:not(:hover){
  opacity: 0.3;
}

li{
  list-style-type: none;
  margin: .5em 0;
  padding: .1em .5em;
  font-size: 1.5rem;
  font-family: sans-serif;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  transition: opacity 200ms;
}

li::before{
  content: "";
  width: calc(100% - 1em);
  height: 100%;
  position:absolute;
  top: 0; left: 0; right: 0; bottom:0; 
  margin: 0 auto;
  border-bottom: 2px solid;
  transform: scale(0);
  transition: transform 200ms ease-out;
  transform-origin: bottom;
  box-sizing: border-box;
}

li:hover::before{
  transform: scale(1);
  box-sizing: border-box;
}

ul{
  height:100vh;
  flex-direction: column;
  display:flex;
  pointer-events: none; 
  background: #303035;
  justify-content: center;
  align-items:center;
  color: white;
  margin:0; padding:0;
}

@media only screen and (max-width: 600px) {
  li{ font-size: 1rem;}
}