Tips for accessing ::before and ::after pseudo elements using Internet Explorer 9 Developer Tools

While using IE9 Developer Tools to inspect elements, I am unable to see the pseudo elements defined in my CSS in the HTML pane: https://i.sstatic.net/Bu5rl.png

Even though I can view them in the CSS pane, they are displayed with a strike-through indicating that the styles are being overridden, rendering them ineffective when attempting to make modifications. https://i.sstatic.net/NI31u.png

How can I target ::before and ::after elements for inspection in IE9?

It may seem similar to this question, but in this case, the elements are div container elements, so the answer provided there may not be applicable here.

Answer №1

Referencing a different response:

Internet Explorer 9 supports the ::after and ::before notations (with two colons) in "standards mode." However, it does not support them in "quirks mode."

The only plausible explanation would be if something in your code triggered the activation of "quirks mode."

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting problem with displaying circular tag image below an image using Jquery

I'm looking to enhance my HTML DOM by adding circular tag images with dimensions of 25x25 pixels to all image tags. While my current method is functional, I've noticed that the position sometimes shifts and the tag often ends up displayed below t ...

Incrementing numbers with jQuery append autoincrement

I am working with a dynamic list of input fields, each one with a unique incremental name. Here's an example structure... <input type="text" name="values[0]" value="some text"> <input type="text" name="values[1]" value="some other text"> ...

When the height is set to 100vh, the Div and Image appear misaligned vertically

Could someone explain why there is a vertical separation between the div and the image? <div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST </div><!-- --><img src="photos/openening.jpg" alt="SICK ...

Use CSS and HTML to ensure that all elements on the website are centered

I'm struggling to create a perfectly centered website layout. Let me share my CSS code with you: body { background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: ...

Mishap with ShareThis.com Social Media Buttons Hit Counter

Having some issues with the hitcount on my social media share buttons. Whenever I "Share" the page on Facebook, it gets counted as a "Like" when I refresh the page. <span class='st_facebook_hcount' st_title='$videoTitle' displayText ...

When hovering over the bootstrap dropdown, the main dropdown remains a clickable link

How can I create a bootstrap dropdown menu that activates on hover, while still allowing the main button to link to a different page when clicked? Below is the HTML code: <div class="body-wrap"> <div class="container"> <nav class="navbar n ...

Embed Javascript Code Within Text Field

Is there a way to incorporate this JavaScript into the "price" text value? Below is the code snippet: <script> function myFunction() { var x = document.getElementById('car-select')[document.getElementById('car-selec ...

Sitelinks and a brief description appear beneath the website name when it is displayed in search

Is there a way to incorporate "metadata" (green and red lines in the image below) into a website? I might not have the correct term for it, so my apologies in advance. I attempted changing the following tag in the index.html file, but I am uncertain if thi ...

Tips for modifying the value and refreshing the array

I retrieve data from $scope.roleinfo = {"QA":[{"White Box Testing":0},{"Black Box Testing":0}],"Development":[{"Server Side":0},{"UI":0},{"Back end":0}]}; Then, I present these values in a table. Now, I need to update the maxcount and create an array w ...

`Error occurring with React-router when refreshing nested pages causing CSS not to load`

Setting up a react-router for my first React webapp has been a bit tricky. It seems to be functioning properly except for the issue with CSS not loading on nested pages when they are refreshed. The CSS works fine for single level paths like /dashboard, bu ...

Undefined error encountered in the Google Places library

I'm new to working with the Ionic framework and was experimenting with implementing an autocomplete search feature using the Google Maps API. After going through several resources, I included the following code: <script type="text/javascript" src ...

Upload of file successfully completed even though limit was set; input remains unchanged

I seem to be facing an issue where even after confirming with the ok in the window.alert message, the file name still appears next to Choose File. It seems like the file is still being uploaded to the input. How can I prevent this from happening? <inp ...

Chrome mobile's justify-content for space-evenly is malfunctioning

Experiencing an issue with the space-evenly value for justify-content on Chrome mobile, while it functions correctly on Desktop and Firefox mobile. A minimal example can be seen here: Example Having a flex container in a row direction aiming to evenly sp ...

Display the file name of the following/preceding images on the backward/forward button

Hello, I am fairly new to web development and could use some professional assistance. I have a slideshow set up, but I am struggling with adding the filename of the next or previous images to the back/forward icons of the slideshow. Is this achievable with ...

How can elements be concealed in HTML using CSS if they do not have an ID or class?

Looking for a way to hide the second span element within a div that does not have an ID, but its parent div does. The goal is to target and hide the span that contains "second". <div id="example"> <div> <span>First</span> ...

What is the method to assign multiple values to ng-disabled in AngularJS?

Is there a way to assign multiple values for ng-disabled in AngularJS? The issue I'm facing is demonstrated in the following JS Fiddle: http://jsfiddle.net/FJf4v/10/ <div ng-app> <div ng-controller="myCnt"> <h3>A ->> ...

How to customize the background color in a Thymeleaf select element

Here is the HTML code I am working with: <select th:field="*{status.health}" th:value="${status.health}" th:class="health_color" th:name="status_healt ...

Send information from a web page's elements to PHP with the help of AJAX

My goal is to integrate AJAX, HTML, and PHP to create a seamless user experience. I am currently facing difficulty in passing variables to the PHP form. The method I've employed seems a bit complex, especially since this is my first attempt at using A ...

Equal dimensions for all cards in the TailwindCSS gallery display

I am currently working on an image gallery in React with Tailwind CSS. Here's a glimpse of how it looks: https://i.stack.imgur.com/ABdFo.png Each image component is structured like this: <div className="flex items-center"> < ...

Access the data from a table row when a checkbox is selected

Edit: I want to rephrase my inquiry I am attempting to retrieve the text inside the anchor tags within a <td> when a checkbox is checked. The issue is that the anchor tags do not have an id or class assigned to them. Below is a simplified version ...