Skip to content

Instantly share code, notes, and snippets.

@Ricardo-Diaz
Created October 23, 2012 18:53
Show Gist options
  • Save Ricardo-Diaz/3940784 to your computer and use it in GitHub Desktop.
Save Ricardo-Diaz/3940784 to your computer and use it in GitHub Desktop.
CSS: Triangle Inline Link
//Triangle Inline Link
//This is some dummy text to show an inline link.
//Link will have a triangle next to it that changes upon hover
.inline-link-3 {
display: inline-block;
position: relative;
padding-left: 6px;
/* Font styles */
text-decoration: none;
color: #6AB3EC;
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}
.inline-link-3:hover {
color: #3C9CE7;
}
.inline-link-3:before {
content: "\25BA";
font-size: 80%;
display: inline-block;
padding-right: 3px;
pointer-events: none;
}
.inline-link-3:hover:before {
color: #F2BF97;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment