Question

On a page (which I maintain for myself and thus can restrict browser support to FF 3.5+) I’d like to add “SO” after each link to StackOverflow.com. First I did it like this…

a[href^='https://stackoverflow.com/']:after {
  content: "SO";
  font-size: x-small;
  color: #333333;
  padding-left: 1px;
  position: relative;
  bottom: 3px;
}

…but Firefox underlined “SO” like the link itself. After reading questions

• “text-decoration” and the “:after” pseudo-element, revisited
• “text-decoration” and the “:after” pseudo-element

…I got to the following solution:

a[href^='https://stackoverflow.com/']:after {
  content: "SO";
  font-size: x-small;
  color: #333333;
  padding-left: 1px;
  position: relative;
  bottom: 3px;
  /* clear the underline */
  padding-bottom: 5px;
  background-color: white;
}

Maybe it’s hack’ish, but it’s rather intuitive (the underline is hidden by the background above it) and it worked nice (I don’t remember I checked it in browsers other than FF 3.5 and FF 7, but still FF is the only browser I really want to support). The problem is that the code broke in FF 8: the underline-clearing code above does not work. So I’m looking for a solution.

Actually, I already find one: adding “display: inline-block”, but:

• it can cause “SO” to be wrapped to a new line
• it can’t be used together with the old underline-clearing code, because that padding-bottom is added to the link itself

http://cssdesk.com/5TqEN

Final note: I want it to work at least in FF 3.5 and FF 8, with only CSS, without making “SO” text an image, better than the inline-block solution

Answer 1

I came with up with this http://jsfiddle.net/wGb68/4/

a[href^='http://stackoverflow.com/'] {
    padding-right: 15px;
    display: inline-block; /* not needed, but fixes Chrome and Opera */
}

a[href^='http://stackoverflow.com/']:after {
    font-size: x-small;
    padding-left: 1px;
    content: "SO";
    color: #333;

    position: absolute;
}

Poorly the clearing of the text-decoration only works in Firefox and Opera with this code. I could not bring it to work in any other browser. :/

The display: inline-block is not needed in Firefox, but without it in Opera and Chrome the “SO” don’t follows a linebreak, and even overlaps the container.