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

[TheDoc]

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.

[wolfcry911]

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

[TheDoc]

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

[SgtLegend]

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

[TheDoc]

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

[SgtLegend]

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.

[TheDoc]

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

[wolfcry911]

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

[TheDoc]

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

[TheDoc]

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

[Taufik Nurrohman]

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

[SgtLegend]

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/

[TheDoc]

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.

[TheDoc]

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;

}

}

[TheDoc]

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

[Author]

Posts