Forums

Get help. Give help. A Web Design and Development Community.

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

    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..

    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

    This reply has been reported for inappropriate content.

    @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

    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.

We have a pretty good* newsletter.