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псевдоелементи adisplay властивість.

Додайте до :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 після * вхідного тексту (+) і встановіть для його перед вмістом значення * ((перед). * /

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