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

What is the best way to position an element on the left side of the navbar without having it animated?

Prevent unauthorized entry to css and javascript files

Attempting to repair navigation menu on grou.ps website

GSAP also brings scale transformations to life through its animation capabilities

Swapping out LinkButtons using jQuery

Modifying the Vue.js Vue3-slider component for custom color schemes

Floating elements are misaligned and not laying out correctly

Customizing the input placeholder for password fields in IE8 using jQuery

When hovering over an image, CSS text will be displayed

How can you update an image's source when hovering over it?

Responsive left and right image styling in CSS and HTML

Maintain hover effect of main menu on sub-menu in CSS3 flip dropdown menu

How to perfectly align a button at the center and position it in the forefront?

In order to activate the VScode Tailwind CSS Intellisense plugin, I have discovered that I need to insert a space before

I am experiencing issues with my button not responding when I click on the top few pixels

Tips for implementing an autoscroll feature in the comments section when there is an abundance of comments

Automating the process of disabling a function on Internet Explorer

bespoke design picture holder

As the page is scrolled upwards, the custom cursor's location shifts accordingly

Changing text color with JQuery animation