The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Line over links

  • # January 31, 2013 at 9:42 am

    I have been looking for a pure css or maybe js way to make a “big slashy line” over my links in my navigation.

    a link to what I am talking about…

    ( “here”)

    any help would be forever appreciated.

    # January 31, 2013 at 9:50 am

    This reply has been reported for inappropriate content.

    @davieghost, there may be a better way, but here’s a rough copy with a pseudo element and linear gradient..

    # January 31, 2013 at 9:56 am

    @ChrisP, thank you very very much.

    # January 31, 2013 at 10:17 am

    @ChrisP, I had a problem when swithcing the gradient to show up on hover.

    # January 31, 2013 at 10:19 am

    This reply has been reported for inappropriate content.

    @davieghost, like this?

    Edit: to clarify, if you only want the line on hover, instead of :before, make it :hover:before

    # February 2, 2013 at 12:19 pm

    Hey, @ChrisP, when I apply the code to my css nothing happens… I’m sure I’m just doing something wrong. I have it up [here]( “”)

    # February 2, 2013 at 2:11 pm

    This reply has been reported for inappropriate content.

    @davieghost, I was using SASS on that pen, that nesting and @include won’t work in regular css..for the linear gradient you’ll have to write out each one with syntax and vendor prefixes, and you also won’t be able to do the nesting of :before, you’ll have to write it as a completely different rule

    # February 2, 2013 at 2:48 pm

    @ChrisP, Awesome! Thanks so much! I haven’t used SASS yet, so I’ll need to look into it, but I’ve been meaning to anyways. Now I feel like I understand though.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed