Skip to content

Instantly share code, notes, and snippets.

@lilithebowman
Created September 13, 2018 16:05
Show Gist options
  • Save lilithebowman/3ad64c8d88d844ac6584fd9ced2e9afb to your computer and use it in GitHub Desktop.
Save lilithebowman/3ad64c8d88d844ac6584fd9ced2e9afb to your computer and use it in GitHub Desktop.
@mixin underline($start, $end, $borderThickness) {
/* This linear gradient background image creates a stripe behind the area under the letter allowing the descenders of the text to go on top */
background-image: linear-gradient(180deg, $color-brand-background 0%, $color-brand-background $start, #9ecc3b $start + 1, #9ecc3b $end, $color-brand-background $end + 1);
border-bottom: $borderThickness $color-brand-primary solid;
line-height: 1.3em;
text-shadow: 1px 1px 1px $color-brand-background;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment