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…

    (http://www.flickr.com/photos/davieghost/8433015006/in/photostream “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..

    http://codepen.io/ChrisPlz/pen/BdLex

    # 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? http://codepen.io/ChrisPlz/pen/yHaFt

    **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](http://www.thortrio.com/ “”)

    # 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](http://www.the-art-of-web.com/css/linear-gradients/#section_0 “”), 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.

*May or may not contain any actual "CSS" or "Tricks".