Я пытаюсь получить несколько псевдо-элементов для работы с IE, но это просто не позволяет мне.
Он пересекает CSS и действует так, как будто он не существует, что меня ободряет.
Кто-нибудь знает, что я делаю неправильно? HTML:
<div class="starttour">
<div class="newbutton headerbutton">
<span class="iconhead icon-02-arrow-icon"></span>
</div>
<p>START TOUR</p>
</div>
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));
}
Снимок экрана о том, что происходит: