:after, :before issues in internet explorer 11

Question

In my website design, I am using :before and :after pseudo elements. These are working good in Google chrome and firefox. But having trouble with internet explorer.

The code I am using is

#nav ul li.active:after {
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content: "";
  border-top: 13px solid rgba(2,155,223,0.9);
  position: absolute;
  bottom: -13px;
  width: 0px;
  margin-left: -20px;
}

and out puts are

1.In google chrome

2.In internet explorer 11

is IE preventing this css? because all the styles with in ::before are shown as striked out in IE11.

here is the link to my website

Solution

You have to modified your CSS a little bit to align the drop arrow in all browsers including IE11. Please use this CSS.

#nav li{
  display: inline-block;
  position: relative; /*Added Line*/
}

#nav ul li.active:after {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
content: "";
border-top: 13px solid rgba(2,155,223,0.9);
position: absolute;
bottom: -10px; /*change from -13 to 10px*/
width: 0px;
/*margin-left: -20px;*/  /*REmoved Line*/
  left: 20px;/*Added Line*/
}