<div>
  <ul>
    <li> <a href="https://en.wikipedia.org/">Wikipedia </a>
    <li> <a href="https://css-tricks.com/#">Css-Tricks </a>
    <li> <a href="https://developer.mozilla.org/#">Developers Mozilla </a>
    <li> <a href="https://caniuse.com">Can I use...Browser support guide </a>
    <li> <a href="https://cssstats.com/#"> View Stats for your css </a>  
    <li> <a href="https://deviceatlas.com/device-data/explorer/webusage/traffic#">Device Data from DeviceAtlas.com</a>
    <li>  <a href="https://www.w3schools.com/"> The school</a>
  </ul>
</div>
body{
font-family: Arial, Helvetica, sans-serif;
  background:#efefef;
margin:2em
}

div{
  padding:2.5em 1em 5em 3.5em ;
  border:solid 1px #ddd;
  display:block;
  width:350px;
  background:#fff;
  margin:auto;
  box-shadow: 2px 2px 10px #ddd:
}
ul{
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 1em;
}
li:not(:first-child){
  padding:1.8em 0 0;
}
a,a:visited,a:active,a:link{
  color:#555;
  font-weight:600;
  text-decoration:none;
  font-size:15px;
  position:relative
}
a:hover{
  color:#222
}
a[href $="#"]:hover{
  color: orange;
}
a:hover:before{
  filter: brightness(0)
}
a[href $="#"]:hover:before{
  animation: none
}

a:after{
  content:attr(href);
  display:block;
  left:0;
  font-size:9px;
  white-space:nowrap;
  color:#999;
}
a:hover:after{
  color:#222;
}
a:before{
  content:"";
  display:block;
  position:absolute;
  left:-25px;
  width:15px;
  height:15px;
top:0px;
background-image: url("data:image/svg+xml,	%3Csvg xmlns='http://www.w3.org/2000/svg' height='25' width='23' class='star rating' data-rating='1'%3E%3Cpolygon points='9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78' style='fill:orange;fill-rule:nonzero;'/%3E%3C/svg%3E");
 background-size:100% 100%;     
filter: grayscale(1);
}

a[href $="#"]:before{
  filter: grayscale(0);
  animation: grow 0.6s infinite alternate;
}

  @keyframes grow {
  from {transform: scale(1) rotate(0deg);filter: drop-shadow(0px 3px 0px #ddd);}
  to {transform: scale(1.4)  rotate(20deg); filter: drop-shadow(5px 10px 2px #eee);}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.