Cannot access pseudo elements in the Microsoft Edge browser

Is there a workaround for not being able to select or access the properties of :before & :after elements on Microsoft Edge's inspect element?

.arrow_box {
    position: relative;
    background: #d43959;
    border: 4px solid #ac1f3c;
    width: 300px;
    height:200px;
    margin-top:20px;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(213, 55, 55, 0);
    border-bottom-color: #d53737;
    border-width: 20px;
    margin-left: -20px;
}
.arrow_box:before {
    border-color: rgba(245, 88, 99, 0);
    border-bottom-color: #f55863;
    border-width: 26px;
    margin-left: -26px;
}
<div class="arrow_box"></div>

Link to Codepen

Although this code snippet works well, I am facing issues accessing the pseudo elements in Microsoft Edge.

.arrow_box:after, .arrow_box:before

Answer №1

Utilizing the @supports regulation provides a solution for managing your pseudo element specifically on Microsoft Edge.

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Answer №2

In the past, Edge did not have this capability, but with the release of version 16 (now accessible in insider builds and set for official launch on October 17, 2017), it has been included.

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

The Bootstrap menu does not seem to be affecting the positioning of the body text

I recently came across an issue with a Bootstrap-based site I'm working on. When I click the hamburger menu on mobile view, the main content doesn't shift down to accommodate it, causing an overlap. Not ideal :-( Here's my Demo: https://js ...

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

Styling Your Navigation Bar with CSS and Active States

Creating an interactive navigation element for a menu can be challenging, but here's a helpful example. http://jsfiddle.net/6nEB6/38/ <ul> <li><a href="" title="Home">Home</a></li> <li class="activ ...

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

What is the best way to link one element to another element?

Apologies for the mismatched title, but here's my issue: I need to create hidden checkboxes for each Polymer's paper-button div in jsp/style related problems. <%int i; %> <form ACTION="Computation.jsp"> <% for(i=0; i<n; ...

Purchased a website design - should I go with a table structure or CSS layout?

Recently, I decided to hire a new web designer for one of my projects. After multiple attempts, he finally delivered a beautifully designed webpage by sending me 20 poorly sliced images from Photoshop and an entire HTML file with table structure. When I r ...

Arranging of the fetch_assoc

As a complete beginner in programming, I am excited to share that I have recently embarked on this journey and had only a few classes so far. Currently, I am working on developing a new website just for fun. It is intended for me and my colleagues at work ...

Adjust the text within the treeview node for proper alignment

My treeview has nodes that display text, but when the length of the text increases, it moves to the next line and starts one place before the upper text, causing alignment issues. Is there a way to use CSS or JavaScript to properly align the text? Regards ...

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

Having trouble with the $push operator in Mongo DB?

I am facing an issue while attempting to store data in an array within an object in a Mongo model by utilizing the req.params method. Unfortunately, I encounter the following error: MongoError: cannot use the part (friends of friends.username) to traverse ...

Python code to locate images within HTML source code

Searching for images in an html source code can be tricky. I prefer using regex over the html.parser method, but I'm open to learning if you can explain it simply like you would to a child. I wish I could use beautifulsoup, but mastering the hard way ...

Unable to transform dynamically loaded text area into CKEditor

Executing the get_content function upon a link click. function get_content(n) { var hr=new XMLHttpRequest(); var url="./updatecontent.php"; var vars="id="+n; hr.open("POST",url,true); hr.setRequestHeader("Content-type","application/x-w ...

"Introducing a smooth animation effect to shift text alignment to the center

I'm currently using the code below, but I am not satisfied with the margin adjustment achieved by text-align:center;. Is there a way to smoothly transition the text alignment to center similar to how it is done in the following snippet of code? if ($ ...

How to use JQuery to retrieve multiple background image URLs from CSS styling

Initially, here is the CSS code that I am working with: background-image: url(/style_elements/img/first.png), url(/style_elements/img/second.png); I am trying to specifically target the second background image URL using jQuery: var item_img_url = item_i ...

What is the best way to set the z-index for elements within CSS containers that are utilized for container queries?

I am thrilled about the introduction of container queries in CSS. It's great to see this feature now available across all browsers. However, I have encountered an issue when working with multiple consecutive containers and placing an absolutely positi ...

Utilizing CSS classes to style custom day templates in ng-bootstraps datepicker

Currently, I am utilizing ng-bootstraps datepicker to showcase user data on a daily basis. I have implemented a custom day template to apply specific CSS classes. <ng-template #customDay let-date> <div class="custom-day" [ngCla ...

Having trouble with a JavaScript function as a novice coder

Hello, I'm still getting the hang of JavaScript - just a few days into learning it. I can't figure out why this function I'm calling isn't functioning as expected. Here's the content of my HTML page: <!doctype html> <htm ...

Trouble with Angular Charts: Data Reading Issue

Trying out chart.js for the first time and encountered an issue where the chart is not able to read data from the model. Previously, I had an error message of Error: $injector:modulerr Module Failed to instantiate module chart.js. This was fixed by switch ...

Retrieve the string data from a .txt document

I am facing an issue with my script that retrieves a value from a .txt file. It works perfectly fine when the value is a number, but when trying to fetch text from another .txt file, I encounter the "NaN" error indicating it's not a number. How can I ...

Having issues with the Vue.js documentation example not functioning properly in Codepen?

My goal is to replicate a checkbox example from Vue.js's documentation. However, when I import Vue into codepen.io and copy the code for multiple checkboxes into the JS field, then paste the HTML into the designated field, something isn't working ...