Get a free trial // 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:

    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:

    # July 18, 2012 at 9:09 pm

    I take it all back. It’s not working in FF:

    # July 19, 2012 at 3:57 am

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

    # July 19, 2012 at 1:35 pm

    The problem with that is you get a situation where the pseudo element gets widowed:

    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.


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


    #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:

Viewing 15 posts - 1 through 15 (of 15 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