Before pseudo element not working in Internet Explorer for <a> element

Question

I'm using one juicer.io plugin for Social Media.

There is Load More button in <a> element. I would like to change text from Load More to Mehr Laben, I did that using ::before element and works fine for all browsers except IE 11.

I've created example on JSFiddle to demonstrate problem.

Problem is IE 11 can't read pseudo element, maybe only for .

I've tried to replace ::before with :before but not working.

Note: This <a> was generated dynamically, and I can't wrap.

JSFIDDLE: https://jsfiddle.net/uy4xewpr/ You can run this inside IE and you will see empty page, but inside Chrome ... works fine.

HTML:

<a href="#">READ MORE</a>

CSS:

a{
    visibility: hidden;
    color: #000;
    font-size: 17px;
    display: flex;
    text-transform: none;
}
a::before{
    display: inline-block;
    visibility: visible;
    content: "Mehr Laden";
    padding-left: 32px;
    padding-top: 3px;
    min-width: 124px;
}

Answer 1

I don't really think the behavior of IE11 is odd. In fact this should be expected.. pseudo elements are children to the parent element so setting the a to have visibility hidden then setting the visibility of the pseudo content to be visible shouldn't work. This is actually wrong, I thought visibility should behave like opacity where you cannot unset the opacity in a child of a parent with different opacity. It's probably a bug in IE11 not bad implementation from other browsers like I thought.

To fix this remove the visibility and use font-size: 0 on the a then set the font-size to the desired value on the pseudo element

a {
    color: #000;
    font-size: 0;
    display: flex;
    text-transform: none;
}
a::before {
    display: inline-block;
    font-size: 17px;
    content: "Mehr Laden";
    padding-left: 32px;
    padding-top: 3px;
    min-width: 124px;
}

The only drawback is that it won't work on Android 2 which is a very old version you probably don't care about

Answer 2

You can use two tricks here:

• font-size: 0

 a { font-size: 0; color: #000; font-size: 0; display: flex; text-transform: none; } a::before { font-size: 17px; display: inline-block; content: "Mehr Laden"; padding-left: 32px; padding-top: 3px; min-width: 124px; } 

 <a href="#">READ MORE</a> 

• color: transparent

 a { font-size: 17px; color: transparent; display: flex; text-transform: none; } a::before { color: #000; display: inline-block; content: "Mehr Laden"; padding-left: 32px; padding-top: 3px; min-width: 124px; } 

 <a href="#">READ MORE</a>