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
The @supports
rule allows you to handle your pseudo element on Microsoft Edge.
@supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With