Skip to content

Instantly share code, notes, and snippets.

@marzdgzmn

marzdgzmn/test

Created February 27, 2019 14:38
Show Gist options
  • Save marzdgzmn/9e42459b1f1b726c5b5ba99a3c313abe to your computer and use it in GitHub Desktop.
Save marzdgzmn/9e42459b1f1b726c5b5ba99a3c313abe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test
<!DOCTYPE html>
<html>
<head>
<style>
.CardLink {
display: block;
color: #666;
text-shadow: 0 2px 0 #efefef;
text-decoration: none;
height: 2.75rem;
line-height: 2.75rem;
border-bottom: 1px solid #bbb;
position: relative;
}
@media (min-width: 300px) {
.CardLink {
padding-left: 1.8rem;
font-size: 1.6rem;
}
}
.CardLink:before {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.CardLink_Hearts:before {
content: "♥";
}
.CardLink_Clubs:before {
content: "♣";
}
.CardLink_Spades:before {
content: "♠";
}
.CardLink_Diamonds:before {
content: "♦";
}
@media (min-width: 300px) {
.CardLink:before {
display: block;
}
}
</style>
</head>
<body>
<a href="#" class="CardLink CardLink_Hearts">Hearts</a>
<a href="#" class="CardLink CardLink_Clubs">Clubs</a>
<a href="#" class="CardLink CardLink_Spades">Spades</a>
<a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment