两个伪元素::之前具有不同的属性

时间:2017-11-16 15:53:29

标签: html css pseudo-element

使用两个具有不同::before属性的伪元素border(请参阅js小提琴)。尽管“你只能使用一个::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;
}

2 个答案:

答案 0 :(得分:6)

您似乎只有一个伪元素。

cons

这就在UI中:

pseudo

你的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的方式:

chrome treatment

答案 1 :(得分:3)

只有一个伪元素,但添加了属性,因为这两个规则适用于该伪元素。

你的CSS相当于

.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;
    border-bottom: 50px solid #e86d0a;
    border-left: 50px solid transparent;
    top: 0;
    left: -50px;
}

这与此案相似,可能更为明显:

a {
   color: red;
}
a {
   font-weight: bold;
}