Ie Crossing Out Pseudo Element CSS

IE crossing out pseudo element CSS?

This is a known issue, but the styles are in fact being applied. The developer tools thinks the pseudo-element styles are being overridden by the parent-elements corresponding styles. This is easily demonstrated by inspecting the Computed style of the parent-element and looking at (what the F12 tools believe to be) competing styles:

Sample Image

Again, however, these styles are in fact being applied to the correct elements - regardless what the developer tools believe or suggest. You can confirm this by running over the parent-element and the two pseudo-elements and logging their computed height:

(function () {

var el = document.querySelector( ".newbutton" );

[ "", "::before", "::after" ].forEach(function ( e ) {
// Output: 74px, 80px, 80px
console.log( window.getComputedStyle( el, e ).height );


I'll check to see if we already have an internal issue tracking this bug, and add this question to it. Generally speaking, we try to give issues like this the amount of attention proportional to the amount of grief the issue is causing in the real world. So having your question as a new addition on the ticket may help us move a fix forward :)

CSS Pseudo-elements :before & :after work differently in Internet Explorer

You can fix this by using absolute positioning on the pseudo elements. To make this work correctly, set the position of ul li to relative (which will cause elements positioned absolutely within it to be relative to the li). Then, update the position of the pseudo elements to use left instead of margin-left:

ul li{
position: relative; // Add this.
width: 300px;
background: grey;
border:1px solid black;
ul li:before {
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
border-right: 21px solid black;
left:-22px; // Update from margin-left to left
ul li:after {
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 20px solid grey;
left:-20px; // Update from margin-left to left

Before and after pseudo elements on IE and Edge

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

Internet Explorer pseudo elements with background image

After much finicking, I decided to just re-save the SVG with Adobe Illustrator, and that solved the problem for all versions of IE that support SVGs. I have no idea why the SVG was in error for IE, and why it worked perfectly fine for Firefox, Chrome and Safari, but it did.

After/Before pseudo elements in IE11

Can't say (yet) why that happens but here is a workaround, where I use the right property instead.


Giving the span inline-block (or block) does as well solve it, which would mean that the inline element for some reason gets pushed by the pseudo content, and most likely qualifies as a bug ..

.. or normal IE behavior :)

Sample 1 (using right)

span{    position: relative;    font-size: 64px;}span:before, span:after{    position: absolute;    content: " ";    left: 0;    bottom: -3px;    right: 0;    height: 5px;    transition: all 1s ease;}span:before{    background: green;}span:after{    background: red;    }span:hover:after{    right: 100%;}
<span>Hello world</span>

The CSS ::before pseudo element doesn't seem to be working. I can't seem to find out as to why nor get a solution online

I would just write the forward slash as a '/'.

Set the width of the box to be the size of the space, center aligning the text.

content: '/';
width: 20px;
text-align: center;

EDIT: how I would have written it...

 .breadcrumbs  {  object-fit: contain;  padding: 10px; }
.breadcrumbs li { display: block; padding: 0; float: left; /* if you remove the line breaks in the html between your li's you can use display: inline-block; and remove the float left */ }
.breadcrumbs li+li:before { content: '/'; width: 20px; text-align: center; display: inline-block; }
.breadcrumbs li a { text-decoration: none; }
.breadcrumbs li a:active { text-decoration: underline; color: powderblue; }
<ul class="breadcrumbs"> <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\home_landing.html">Home</a></li> <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\products.html">Products</a></li> <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\contact_us.html">Contact Us</a></li> <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\reviews.html">Reviews</a></li></ul>

Pseudo element on ul element not working in IE11

As my experience you can't inspect the ::after or ::before with IE, so the properties are all crossed out, just because in some way they don't belong to the selected element itself, but to its pesudo.

The only way i found to made it look like in other browsers is changing some properties values of your style for the ::before:

header .wrapper .primary-menu #menu-primary-menu > li > .sub-menu::before {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
content: "";
display: block;
height: 470px;
position: absolute;
top: -1rem;
/* Set width to auto */
width: auto;
z-index: -1;
/* Make a huge overflow (i doesn't have to be that big) */
right: -9999px;
left: -9999px;

Hope it helps.

Unable to view pseudo element content in ::before on IE11

It doesn't work in IE because IE doesn't allow anything other than <option> tag inside a <select> box. For more information, you can refer to this answer.

If you want to personalize the select box, you can use <select> with <label>. You can refer to the multiple select sample code below which works well in IE and other browsers:

.multiselect {
width: 200px;

.selectBox {
position: relative;
display: none;

.selectBox select {
width: 100%;
font-weight: bold;

.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;

#checkboxes {
display: block;
border: 1px #dadada solid;

#checkboxes label {
display: block;

#checkboxes label:hover {
background-color: #1e90ff;
<div class="multiselect">
<div class="selectBox">
<option>Select an option</option>
<div class="overSelect"></div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />1
<label for="two">
<input type="checkbox" id="two" />2
<label for="three">
<input type="checkbox" id="three" />3

Related Topics

Leave a reply