Я пытался заставить работать несколько псевдоэлементов в 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>
Скриншот того, что происходит:
-webkit-
биты.Ответы:
Это известная проблема, но стили фактически применяются. Инструменты разработчика считают, что стили псевдоэлементов замещаются стилями, соответствующими родительским элементам. Это легко продемонстрировать, проверив Computed- стиль родительского элемента и посмотрев (как считают инструменты F12) конкурирующие стили:
Однако, опять же, эти стили фактически применяются к правильным элементам - независимо от того, во что верят или предлагают инструменты разработчика. Вы можете подтвердить это , пройдя по родительскому элементу и двум псевдоэлементам и зарегистрировав их вычисленную высоту:
(function () { var el = document.querySelector( ".newbutton" ); [ "", "::before", "::after" ].forEach(function ( e ) { // Output: 74px, 80px, 80px console.log( window.getComputedStyle( el, e ).height ); }); }());
Я проверю, есть ли у нас уже внутренняя проблема с отслеживанием этой ошибки, и добавлю к ней этот вопрос. Вообще говоря, мы стараемся уделять таким вопросам количество внимания, пропорциональное количеству горя, которое проблема вызывает в реальном мире. Так что включение вашего вопроса в заявку может помочь нам продвинуться вперед :)
источник
::after
псевдостили в моем коде вычеркнуты в IE11 и Edge. Все правила действительно применяются :-) Все , кроме одного:cursor: pointer
. Это для мобильного гамбургер-меню, поэтому я могу отпустить указатель (поскольку я не ожидаю, что при таком размере экрана много зависаний).У меня была такая же проблема! Вы должны дать свои
:before
и:after
псевдо элементы вdisplay
собственность.Добавьте следующие строки к
:before
и:after
.display: block;
Это должно решить вашу проблему. :)
источник
Чтобы добавить к ответу выше. Я попробовал display: block, но моя проблема заключалась в том, что фоновое изображение выходило искаженным. Вместо этого я использовал ниже:
display: inline-block;
Это устранило мою проблему с искаженными изображениями в моем: before: after
источник
Поскольку у меня была такая же проблема с Material Font и IE11, и я не мог решить ее с помощью вышеуказанных решений, я посмотрел дальше:
В документации к значкам материального дизайна упоминается использование
<i class="material-icons"></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 ", как указано в этой ссылке.
/ * * Уловка здесь: * этот селектор говорит: «возьмите первый элемент dom после * введенного текста (+) и установите его перед содержимым в * значение (: before). * /
input#myTextField + *:before { content: "👍"; }
источник