Forums

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/

Hompimpa

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] += '&nbsp;<span>'+wordArray[wordArray.length-1]+'&nbsp;<img class="link-arrow" alt="" src="http://static.tumblr.com/hugxd2w/2usm5u18q/link-arrow.png"></span>';
    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: http://css-tricks.com/preventing-widows-in-post-titles/

treehouse : what would you like to learn today?

Forums

[Solved] Using :after on an Inline Element: Firefox no-likey