CODEWITHSUNDEEP
htmlcssmicrosoft-edgepseudo-element
miqureshi
miqureshi

Reputation: 131

Unable to access pseudo elements in Microsoft Edge

Unable to select or access to the property of :before & :after element on Edge`s inspect element is there any thing we can do for that?

.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>

Codepen link

This snippet working fine but on Microsoft edge I can't access this pseudo element: 

.arrow_box:after, .arrow_box:before

Upvotes: 6

Views: 2919

Answers (2)

miqureshi
miqureshi

Reputation: 131

The @supports rule allows you to handle your pseudo element on Microsoft Edge.

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

Upvotes: 3

Patrick
Patrick

Reputation: 13974

This was previously not a feature supported in Edge, however as of version 16 (currently available in insider builds, and being released on October 17, 2017) this has been added.

Upvotes: 0

Related Questions