Permalink
Browse files

Beautiful link underline styles (account for descenders) @zackbloom

  • Loading branch information...
adamschwartz committed Mar 20, 2014
1 parent 10751f5 commit 35fa2f5ab36aa8c81f053f5a8c7b67b60c79ae5b
Showing with 29 additions and 0 deletions.
  1. +29 −0 sass/chapter.sass
View
@@ -51,6 +51,35 @@ img
padding: 0 .666666rem 1rem
margin: 0 auto
a
color: inherit
text-decoration: none
background: -webkit-linear-gradient(#fff, #fff), -webkit-linear-gradient(#fff, #fff), -webkit-linear-gradient(#333332, #333332)
background-size: .05em 1px, .05em 1px, 1px 1px
background-repeat: no-repeat, no-repeat, repeat-x
text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff
background-position-y: 86%, 86%, 86%
background-position-x: 0%, 100%, 0%
&::selection
text-shadow: 0.03em 0 $selectionColor, -0.03em 0 $selectionColor, 0 0.03em $selectionColor, 0 -0.03em $selectionColor, 0.06em 0 $selectionColor, -0.06em 0 $selectionColor, 0.09em 0 $selectionColor, -0.09em 0 $selectionColor, 0.12em 0 $selectionColor, -0.12em 0 $selectionColor, 0.15em 0 $selectionColor, -0.15em 0 $selectionColor
background: $selectionColor
&::-moz-selection
text-shadow: 0.03em 0 $selectionColor, -0.03em 0 $selectionColor, 0 0.03em $selectionColor, 0 -0.03em $selectionColor, 0.06em 0 $selectionColor, -0.06em 0 $selectionColor, 0.09em 0 $selectionColor, -0.09em 0 $selectionColor, 0.12em 0 $selectionColor, -0.12em 0 $selectionColor, 0.15em 0 $selectionColor, -0.15em 0 $selectionColor
background: $selectionColor
&:before, &:after, *, *:before, *:after
text-shadow: none
&:visited
color: inherit
sup a, .chapter-navigation a
background-image: none
text-shadow: none

This comment has been minimized.

Show comment
Hide comment
@adamschwartz

adamschwartz Aug 23, 2016

Owner

🎑 Here’s what this became: SmartUnderline

@adamschwartz

adamschwartz Aug 23, 2016

Owner

🎑 Here’s what this became: SmartUnderline

.example
max-width: 100%
overflow: auto

0 comments on commit 35fa2f5

Please sign in to comment.