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>

Скриншот того, что происходит:

Это известная проблема, но стили фактически применяются. Инструменты разработчика считают, что стили псевдоэлементов замещаются стилями, соответствующими родительским элементам. Это легко продемонстрировать, проверив Computed- стиль родительского элемента и посмотрев (как считают инструменты 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: block, но моя проблема заключалась в том, что фоновое изображение выходило искаженным. Вместо этого я использовал ниже:

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 заключается в том, что HTML в contentтеге -Tag отображается как простой текст с символом & # x .., поэтому вы должны использовать \ escape следующим образом:

content:  "\e5c5";

У меня была такая же проблема! Вы должны дать родителю псевдоэлемента overflow : visibleсвойство.

Ознакомьтесь с этой ссылкой " http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ", как указано в этой ссылке.

: after и: before не поддерживаются в Internet Explorer 7 и ниже ни для каких элементов.

Он также не предназначен для использования с заменяемыми элементами, такими как элементы формы (входы) и элементы изображения.

Другими словами, это невозможно с чистым CSS.

/ * * Уловка здесь: * этот селектор говорит: «возьмите первый элемент dom после * введенного текста (+) и установите его перед содержимым в * значение (: before). * /

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