Last active
July 19, 2018 12:56
-
-
Save automagisch/39842f564027bc2f895e0a91b608a9c3 to your computer and use it in GitHub Desktop.
Better` text-decoration: underline` control
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
usage: | |
--- | |
a.link { | |
@include underline(red, 1px, 5px, true) | |
} | |
--- | |
above renders a red 'underline' with a 1px width, offsetted 5px from the bottom of | |
its parent. | |
param $color: the color of the stroke | |
param $thickness: width of the stroke | |
param $offset: distance from text to stroke | |
param $round-cap: toggle round-capped line | |
*/ | |
@mixin underline($color: #000, $thickness: 1px, $offset: 3px, $round-cap: false) { | |
position: relative; | |
text-decoration: none; | |
&:after { | |
content: ""; | |
position: absolute; | |
left: 0; | |
bottom: -#{$offset}; | |
width: 100%; | |
@if not $round-cap { | |
border-bottom: $thickness solid $color; | |
} @else { | |
height: $thickness; | |
background-color: $color; | |
border-radius: $thickness*2; | |
} | |
} | |
} |
@yairEO I got it here:
https://codepen.io/automagisch/pen/qyaezX
Also added a new 'rounded line cap' flag for obvious reasons :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
a codepen link would be nice