<!-- Tutorial from Design Shack 
https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/ -->

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
  <div id="main">
  <h1> HelvetiList </h1>
  	<ul>
      <li><a href="#">Zurich</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Prague</a></li>
      <li><a href="#">Barcelona</a></li>
      <li><a href="#">Rome</a></li>
    </ul>
  </div>
  
</body>

</html>
/* Lazy browser reset */

* {
  margin: 0;
  padding:0;
}

#main {
  width: 200px;
  margin: 20px auto;
}

/* typography */
h1 {
  font-family: helvetica, arial, sans-serif;
  font-szie: 30px;
  color: #000;
}

/* list styles */
ul {
  list-style: none;
  width:200px;
  margin: 0;
  padding: 0;
}

li {
  text-decoration: none;
  font: 24px helvetica, arial, sans-serif;
  border-bottom: 1px solid #999;
}

li:first-child {
  border-top: 1px solid #999;
}

li a {
  text-decoration:none;
  color: #999;
  display: block;
  width: 200px;
  height: 40px;
	line-height: 40px;
  
  /* transitions and animations */
  -webkit-transition: font-size 0.3s ease, background-color 1s ease;
  -moz-transition: font-size 0.3s ease, background-color 1s ease;
  -ms-transition: font-size 0.3s ease, background-color 1s ease;
  -o-transition: font-size 0.3s ease, background-color 1s ease;
  transition: font-size 0.3s ease, background-color 1s ease;
}

li a:hover {
  font: 26px helvetica, arial, sans-serif;
  line-height: 40px;
  text-decoration: none;
  color: #999;
  background: #e3e3e3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.