user profile image

Nice SCSS underline without breaking the underline from the typography... (edit: fixed smaller text-shadow bug :P)


  1. @pirrera Wow this is pretty hot

  2. I like this a lot, it's much better than my usual absolute positioned element::before work-around. Handy mixin, I'll definitely steal this.

  3. @maxinacube - thank you, use it all you want (i'd love to see it live) @nickcil + @michaellee thanks guys! :)

  4. If only this was the default. Here's a good article about how medium.com improved the underline styling: https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9 They did quite a lot of research.

  5. @nicklassandell thanks, where does he get the time to do that research? :D

  6. @pirrera Don't know, but it sure looks fun!

  7. Hi, @pirrera, I forked it to be used without compass Sass and the result is equally nice.

    Thank you very much! :clap:

  8. Ha! Just yesterday I was trying to figure out how to style underlines with different colours and lay it behind the text. Surprised me it wasn't actually possible with font-style: underline! The general consensus was to use a bottom border which is pretty ugly.

    Can I ask why you used div instead of span for the underlined text? I'm a bit new and have a hard time choosing, sometimes.

  9. Hi. I'm learning about using SCSS by forking your pen. Thanks for making this. However, had one doubt. In the linear gradient line, shouldn't the first term be 'to top' instead of top?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.