无法访问 Microsoft Edge 中的伪元素答案

【问题标题】：Unable to access pseudo elements in Microsoft Edge无法访问 Microsoft Edge 中的伪元素
【发布时间】：2017-08-22 16:01:55
【问题描述】：

无法在 Edge 的检查元素上选择或访问 :before 和 :after 元素的属性，我们可以为此做些什么吗？

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

&lt;div class="arrow_box"&gt;&lt;/div&gt;

Codepen link

这个 sn-p 工作正常，但在 Microsoft Edge 上我无法访问这个伪元素：

.arrow_box:after, .arrow_box:before

【问题讨论】：

注意，应该是::before，有2个冒号
codepen.io/miqureshi/pen/KvRbLr 消息框有一个顶部箭头，由 :after & :after 由 css 创建。如果您在边缘打开此链接，您将看不到伪元素。
@LGSon 请考虑我之前分享的链接。
代码示例应该在问题内，作为代码和/或代码 sn-p，如果使用 Codepen 或 Fiddle 等外部资源，代码的基本部分需要在问题本身，否则对未来的用户几乎没有用处。如果您相应地编辑问题，我将删除我的反对票，并可能改为赞成
在最新的 Windows Insider 版本中提供了检查伪元素的改进！ insider.windows.com

标签： html css microsoft-edge pseudo-element

【解决方案1】：

@supports 规则允许你在 Microsoft Edge 上处理你的伪元素。

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

【讨论】：

【解决方案2】：

Edge 之前不支持此功能，但从版本 16（目前在内部版本中可用，并于 2017 年 10 月 17 日发布）开始添加此功能。

【讨论】：

我发现这个 hack 非常有用。 @supports (-ms-ime-align:auto) { .selector { property:value; } }
@miqureshi 如果上述评论是您自己问题的解决方案，请将其发布为答案并将其标记为已接受！