IE删除伪元素CSS？

我一直在尝试让一些伪元素在IE上工作，但它不允许我这样做。

它越过CSS并表现出它不存在的状态，这有点使我难过。

有人知道我在做什么错吗？

.newbutton {
  border-radius: 50%;
  width: 74px;
  height: 74px;
  position: relative;
  background-color: black;
  margin: 60px 0px 25px 17px;
  overflow: visible;
}

.newbutton:before {
  content: "f";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  top: 37px;
  left: 37px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: fadecolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: fadecolor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.newbutton:after {
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -2;
  top: -3px;
  left: -3px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}

<div class="starttour">
  <div class="newbutton headerbutton">
    <span class="iconhead icon-02-arrow-icon"></span>
  </div>
  <p>START TOUR</p>
</div>

屏幕截图：

这是一个已知问题，但实际上已在应用样式。开发人员工具认为伪元素样式已被父元素对应样式覆盖。通过检查父元素的计算样式并查看（F12工具认为是）竞争样式可以很容易地证明这一点：

但是，实际上，这些样式实际上已应用于正确的元素-无论开发人员工具如何相信或建议。您可以通过遍历父元素和两个伪元素并记录其计算的高度来确认这一点：

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

我将检查是否已经有跟踪此错误的内部问题，并将此问题添加到其中。一般而言，我们尝试给予此类问题以与实际问题引起的悲伤程度成正比的程度。因此，将您的问题作为新添加的问题可以帮助我们进一步解决问题：)

我有这个完全相同的问题！您必须给您:before和:after伪元素一个display属性。

将以下内容添加到:before和中:after。

display: block; 

这应该可以解决您的问题。:)

添加到上面的答案。我尝试使用display：块，但是我的问题是背景图像变形了。相反，我在下面使用：

display: inline-block;

这解决了我的问题：before：after中扭曲图像的问题

由于我在Material Font和IE11上存在相同的问题，并且无法通过上述解决方案解决，因此我进一步看了看：

材料设计图标的文档提及使用

<i class="material-icons">&#xE87C;</i>

适用于不支持连字的浏览器。此处列出了每个项目的代码点：https : //github.com/google/material-design-icons/blob/master/iconfont/codepoints

：after元素的问题在于content-Tag中的HTML呈现为显示＆＃x ..的纯文本，因此您必须使用\转义符，如下所示：

content:  "\e5c5";

我有这个完全相同的问题！您必须为伪元素的父对象赋予一个overflow : visible属性。

请查看此链接引述的链接“ http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ”

Internet Explorer 7及以下版本中的任何元素均不支持：after和：before。

它也不打算用于替换后的元素，例如表单元素（输入）和图像元素。

换句话说，使用纯CSS是不可能的。

/ * *诀窍在这里：*此选择器说“在输入文本（+）之后获取第一个dom元素，并将其before内容设置为*值（：before）。* /

input#myTextField + *:before {
       content: "👍";
    }