inline-block not behaving in IE11

[Hastor]

I'm adding a space and dot between anchors using the following within the a style:

&:after {
display: inline-block;
content: '\00a0\2022';
}

Using inline-block, it prevents the space/dot from being underlined when the link is hovered. EXCEPT in IE11 (and probably other IEs). It works great in Chrome and Firefox. How can I make this work in IE11? It still underlines the space/dot there.

[not2easy]

Hi Hastor, and welcome to the forums. I'm guessing that the anchor

a:hover

is already set to:

text-decoration: none;

I don't have a copy of IE11 to try it out, but wouldn't the old

text-decoration: none;

applied to the container remove that issue?

[Hastor]

That doesn't seem to help. No matter where I put it, it either removes the underline completely (I still want it on the link itself) or underlines the link as well as the seperator.

The &:after is actually added within the <a> element, just after the other text in it. What I showed above was the only way I could get it to work in Chrome/FF. Just not IE.

[lucy24]

I still want it on the link itself

So the <a> as a whole is not set to {text-decoration: none} That means you do have to say it for a:after to override the default behavior.

Saying {display: inline-block} or indeed {display: anything-at-all} would seem to cause more problems than it solves when all you're adding is inline content.

Incidentally, why can't you just say {content: " ."} ? I've always used literal text in {content} declarations.

[Fotiman]

My understanding is that the text-decoration of the underlying <a> element is what you actually see in this case. A hack to get around this is to set the height of the :after to match the height of your <a> element, and set overflow hidden.

&:after { 
 display: inline-block; 
 content: '\00a0\2022'; 
 text-decoration: none;
 height: 16px;
 overflow: hidden;
} 

[lucy24]

My understanding is that the text-decoration of the underlying <a> element is what you actually see in this case.

Quick detour to text editor with html preview suggests that your understanding is right.

But now... Hastor, your <a> don't exist in a vacuum do they? I'm guessing the actual coding is something like

<li><a href = "blahblah">text here</a></li>

If you shift the "after" business from a: to li: you can probably make the problem go away. This works because "after" doesn't really mean after. It means "add to the end of this element's content". So before the </li> tag but after the </a> tag.

[Hastor]

Yeah I enclosed the <a> tags in <span> tags and changed the style to put the after stuff on the span. That seemed to do it. Just sucks that the simple one-line solution worked everywhere but IE! Thanks everyone!

[lucy24]

sucks that {insert random content here} worked everywhere but IE

It's an awful shame that this remains true as recently as MSIE 11. Usually it comes in the form "MSIE < 8" or at worst "MSIE < some-recent-number".