<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);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.