Is there a way to remove a pseudo element in CSS using Internet Explorer

Question

Is there a way to remove a pseudo element in CSS using Internet Explorer

I've been struggling to make some pseudo elements work in Internet Explorer, but it seems like I can't get it to function as intended.

It's as if IE is ignoring the CSS rules that I have set up for these elements, and it's quite frustrating.

Does anyone have any insights on what might be causing this issue?

.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));
}

<div class="starttour">
  <div class="newbutton headerbutton">
    <span class="iconhead icon-02-arrow-icon"></span>
  </div>
  <p>START TOUR</p>
</div>

Screenshot of the unexpected behavior:

css internet-explorer ie-developer-tools

Answer 1

Answer №1

Although there is a known issue, the styles are actually being applied correctly. The developer tools mistakenly show that the pseudo-element styles are overridden by the parent-elements' corresponding styles. This can be easily verified by examining the Computed style of the parent-element and comparing the supposedly competing styles:

In reality, these styles are indeed applied to the correct elements, regardless of what the developer tools indicate. You can confirm this by analyzing the parent-element and the two pseudo-elements and logging their computed height: Check it out here

(function () {

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

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

}());

I will investigate if we already have an internal bug report for this issue and include your question in it. Typically, we prioritize addressing issues based on their impact in real-world scenarios. Therefore, having your inquiry added to the ticket may expedite our efforts to resolve it :)

Answer 2

Although there is a known issue, the styles are actually being applied correctly. The developer tools mistakenly show that the pseudo-element styles are overridden by the parent-elements' corresponding styles. This can be easily verified by examining the Computed style of the parent-element and comparing the supposedly competing styles:

In reality, these styles are indeed applied to the correct elements, regardless of what the developer tools indicate. You can confirm this by analyzing the parent-element and the two pseudo-elements and logging their computed height: Check it out here

(function () {

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

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

}());

I will investigate if we already have an internal bug report for this issue and include your question in it. Typically, we prioritize addressing issues based on their impact in real-world scenarios. Therefore, having your inquiry added to the ticket may expedite our efforts to resolve it :)

Answer 3

Answer №2

Dealing with the same problem was quite a struggle for me! The solution lies in assigning a display property to your :before and :after pseudo elements.

To resolve this issue, include the following code within the :before and :after sections.

display: block;

By making this adjustment, you should see your problem resolved. :)

Answer 4

Dealing with the same problem was quite a struggle for me! The solution lies in assigning a display property to your :before and :after pseudo elements.

To resolve this issue, include the following code within the :before and :after sections.

display: block;

By making this adjustment, you should see your problem resolved. :)

Answer 5

Answer №3

In addition to the previous solution, I experimented with display: block initially but encountered a problem where the background image appeared distorted. As an alternative, I decided to implement the following:

display: inline-block;

By making this adjustment, I was able to resolve the issue of warped images within the :before and :after elements.

Answer 6

In addition to the previous solution, I experimented with display: block initially but encountered a problem where the background image appeared distorted. As an alternative, I decided to implement the following:

display: inline-block;

By making this adjustment, I was able to resolve the issue of warped images within the :before and :after elements.

Answer 7

Answer №4

Dealing with the issue of Material Font and IE11 was a challenge for me, as none of the solutions provided above seemed to work. So, I decided to dig deeper:

Upon reviewing the material design icons documentation, I learned that for browsers that do not support ligatures, it is recommended to use

<i class="material-icons">&#xE87C;</i>

The respective codepoints for each icon can be found here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

An issue arises when using :after elements, where HTML within the content-Tag displays plain text instead of rendering properly. To workaround this, one must use the \ escape sequence like so:

content: "\e5c5";

Answer 8

Dealing with the issue of Material Font and IE11 was a challenge for me, as none of the solutions provided above seemed to work. So, I decided to dig deeper:

Upon reviewing the material design icons documentation, I learned that for browsers that do not support ligatures, it is recommended to use

<i class="material-icons">&#xE87C;</i>

The respective codepoints for each icon can be found here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

An issue arises when using :after elements, where HTML within the content-Tag displays plain text instead of rendering properly. To workaround this, one must use the \ escape sequence like so:

content: "\e5c5";

Answer 9

Answer №5

Dealing with the same problem was such a headache! The simple fix is to make sure the parent of your pseudo element has an overflow: visible property.

Answer 10

Dealing with the same problem was such a headache! The simple fix is to make sure the parent of your pseudo element has an overflow: visible property.

Answer 11

Answer №6

Make sure to have a look at this informative link "", which was referenced in the source below:

:after and :before are not compatible with Internet Explorer 7 and earlier versions, for any type of element.

It's important to note that these pseudo-elements should not be used on replaced elements like form inputs or images.

In simple terms, achieving this solely through CSS is not feasible.

/* * The key lies here: * this selector instructs to “take the first DOM element after * the input text (+) and add content before it (:before). */

input#myTextField + *:before {
       content: "👍";
    }

Answer 12

Make sure to have a look at this informative link "", which was referenced in the source below:

:after and :before are not compatible with Internet Explorer 7 and earlier versions, for any type of element.

It's important to note that these pseudo-elements should not be used on replaced elements like form inputs or images.

In simple terms, achieving this solely through CSS is not feasible.

/* * The key lies here: * this selector instructs to “take the first DOM element after * the input text (+) and add content before it (:before). */

input#myTextField + *:before {
       content: "👍";
    }

Is there a way to remove a pseudo element in CSS using Internet Explorer

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

"Move a div towards the mouse's location by animating it with JavaScript when

Is it possible to have a hover box with no spacing in between?

Tips for stopping the background color from affecting the text color

PHP - designate a separate folder for script and style resources

The functionality of Nativescript squared buttons is not functioning as expected

Looking to authenticate a CSS span class within an XML document using Oxygen Program?

All hyperlinks are displayed as a single entity

header color scheme and dimensions

Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state

What strategies can be implemented to avoid using .stop() in specific scenarios?

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

Unexpected Results from Div Positioning

spill the elements from one div into another div

CSS Duo-Toned Background

Transferring Chart Div Titles Above Bars

Show the center portion of an image without needing to know the size, both horizontally and vertically aligned

Steps for converting SCSS to CSS using node-sass

Continual dark mode throughout page navigation with the ability to switch between light and dark modes

"Step-by-step guide on creating a dynamic clipping mask animation triggered by mouse wheel

Is there anyone who can provide a straightforward solution (code) for < something basic?