Get a free trial // Grow your CSS skills // Land your dream job

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

    @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

    @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

    @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