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/之前你可以在IE中运行它，你会看到空白页面，但在Chrome内部......工作正常。

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

我真的不认为IE11的行为很奇怪。实际上这应该是预期的。伪元素是父元素的子元素，因此将a设置为具有可见性hidden，然后将伪内容的可见性设置为visible不应该这实际上是错误的，我认为可见性的行为应该像opacity，在这种情况下，您无法取消不透明度的父级子级中的不透明度。这可能是IE11中的一个错误，其他浏览器的实现也不错，就像我想的那样。

要解决此问题，请删除可见性并使用font-size: 0上的a，然后将font-size设置为伪元素上的所需值

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

唯一的缺点是它不适用于Android 2，这是一个你可能不关心的旧版本

Answer 2

你可以在这里使用两个技巧：

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>

在伪元素无法在Internet Explorer中使用<a> element

2 个答案: