Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using :after on an Inline Element: Firefox no-likey

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #38966
    TheDoc
    Member

    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.

    #106333
    wolfcry911
    Participant

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

    #106335
    TheDoc
    Member

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

    #106340
    SgtLegend
    Member

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

    #106341
    TheDoc
    Member

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

    #106343
    SgtLegend
    Member

    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.

    #106344
    TheDoc
    Member

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

    #106347
    wolfcry911
    Participant

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

    #106350
    TheDoc
    Member

    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

    #106357
    TheDoc
    Member

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

    #106405
    Taufik Nurrohman
    Participant
    #106411
    SgtLegend
    Member

    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/

    #106426
    TheDoc
    Member

    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.

    #106433
    TheDoc
    Member

    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;
    }
    }
    #106434
    TheDoc
    Member
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.