CODEWITHSUNDEEP
htmlcssinternet-explorer
ml92
ml92

Reputation: 451

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

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;
}

Upvotes: 3

Views: 2069

Answers (2)

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

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

Upvotes: 3

dippas
dippas

Reputation: 60553

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>

Upvotes: 3

Related Questions