: after ,: before problems in Internet explorer 11

Question

In my site design, I use the :before and :after pseudo-elements. They work well in Google Chrome and firefox. But the problem is with Internet Explorer.

The code I use

 #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

1. In Google Chrome

2.In Internet explorer 11

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

here is the link to my site

Answer 1

You need to modify your CSS a bit to align the arrow with the arrows in all browsers, including IE11. 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*/ }