html - 两个伪元素::before 具有不同的属性

Question

使用了两个伪元素 ::before与不同border属性(参见 js fiddle)。尽管“您只能使用一个 ::before 和一个 ::after 伪元素”，但它确实有效。为什么？

https://jsfiddle.net/8L7zou3e/1/

<div class="el"></div>

.el {
    position: relative;
    margin: 100px 0 0 500px;
    width: 300px;
    height: 100px;
    background-color: #AA4343;
}
.el:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid #e86d0a;
    border-left: 50px solid transparent;
    position: absolute;
    top: 0;
    left: -50px;
}

.el:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid #e86d0a;
    border-left: 50px solid transparent;
    position: absolute;
    top: 0px;
    left: -50px;
}

Answer 1

你好像只有一个伪元素。

在 UI 中:

您的 CSS 级联到:

.el:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 50px solid #e86d0a;
  border-left: 50px solid transparent;
  position: absolute;
  border-bottom: 50px solid #e86d0a;
  border-left: 50px solid transparent;
  top: 0;
  left: -50px;
}

查看 Chrome 处理组合 CSS 的方式: