Grow your CSS skills. Land your dream job.

Using :after on an Inline Element: Firefox no-likey

  • # July 18, 2012 at 4:38 pm

    Hey guys, I’m trying to figure out if I can actually do this or if Firefox just isn’t going to play nice.

    Here’s what I’m trying to do: http://codepen.io/ggilmore/pen/xdlJF

    Put a little icon after a link. The problem is when the link goes multi-line.

    # July 18, 2012 at 6:19 pm

    why reinvent the wheel? Why not use an attribute selector to apply a background image? works multi-line

    # July 18, 2012 at 7:09 pm

    Preferably the icon will always come just after the last word, like it’s doing in Chrome.

    # July 18, 2012 at 7:14 pm

    @TheDoc Your demo works fine for me in Firefox, what is the result your getting?

    # July 18, 2012 at 7:17 pm

    Interesting, the result that I’m getting is the screenshot that I posted in the same pen.

    # July 18, 2012 at 7:19 pm

    haha didn’t see that down there, what version of Firefox are you using so i can eliminate the factor of it been a bug in older versions.

    # July 18, 2012 at 7:30 pm

    I was viewing it in 13.0.1, updated to 14 and it’s working. Blarg.

    # July 18, 2012 at 8:28 pm

    I’m on 14.0.1 and its not working for me. And the background method does come after the last word…

    # July 18, 2012 at 8:44 pm

    The background method doesn’t work when using a stencil. It’s for a Tumblr theme that allows users to change a particular highlighted color, can’t go that route: http://codepen.io/ggilmore/pen/Fvfna

    # July 18, 2012 at 9:09 pm

    I take it all back. It’s not working in FF: http://jsfiddle.net/AznZs/

    # July 19, 2012 at 3:57 am

    http://jsfiddle.net/tovic/AznZs/1/

    # July 19, 2012 at 7:15 am

    Using positions for an pseudo element that sits within an inline element is a bad idea as browsers can render inconsistent results, all you need is display: inline-block and it works consistently in all browsers that support the :after pseudo selector.

    http://jsfiddle.net/chrisupjohn/AznZs/3/

    # July 19, 2012 at 1:35 pm

    The problem with that is you get a situation where the pseudo element gets widowed: http://jsfiddle.net/AznZs/4/

    It looks like there’s no easy solution here. I suppose the widowed element is better than just completely breaking in FF.

    # July 19, 2012 at 2:58 pm

    Ended up with a jQuery solution. Not my favourite thing to do, but if the boss wants no widows the boss gets no widows.

    jQuery:

    // link title, no widow
    $('#blog .type-link h1 a').each(function() {
    var wordArray = $(this).text().split(" ");
    wordArray[wordArray.length-2] += ' '+wordArray[wordArray.length-1]+' ';
    wordArray.pop();
    $(this).html(wordArray.join(" "));
    });

    SCSS:

    #blog article.type-link h1 a {
    position: relative;

    .link-arrow {
    background: $highlight;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: top;
    margin-top: 3px;
    }

    span {
    white-space: pre;
    }
    }
    # July 19, 2012 at 2:59 pm

    Widow code from: http://css-tricks.com/preventing-widows-in-post-titles/

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

You must be logged in to reply to this topic.

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