ptyskju ptyskju - 4 months ago 24
HTML Question

Before and after pseudo elements on IE and Edge



I am working on this page: link to page.

Inside

h2
I have
before
and
after
elements. In IE they are too big, original width and height these images are not working. When I am trying to resolve this problem, in FF and Chrome everything is getting even worse.

In Edge things are a little bit different - I have figured out a way to make images smaller, but
before
element is inside
h2
text.

Here are the examples:


Normal (from FF and Chrome)
normal view

A little strange (from Edge)
strange view

So crazy (from IE)
karuzela śmiechu



CSS code:

h2{/*How I am displaying h2 elem */
text-align: center;
width: 80%;
margin: 45px auto 115px !important;
text-transform: uppercase;
color: #fff;
}
h2::before {
content: url(img/pepper.svg);
margin-right: 10px;
position: relative;
height: 50px;
}
h2::after{
content: url(img/apple.svg);
margin-left: 10px;
position: relative;
height: 50px;
}
@supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
h2::before {
position: absolute;
}
h2::after{
position: absolute;
}
}

Answer

As @ankit says, removing width: 80% is doing right on IE. Also removing part with supports resolved problem with Edge.