我的css ::仅适用于最后一个元素

Question

我想在我的div上添加一个边框底部渐变，看完网后我发现了一个解决方案：

.element {
  height: 55px;
  max-width: 400px;
  background-color: #454A4D;
  margin-top: 20px;
}
.element:after {
   content: "";
   background: -webkit-linear-gradient(left, #343738 0%, #e07051 100%);
   display: block;
   height: 4px;
   width: 400px;
   position: absolute;
   bottom: 0;
}

＆＃34;元件＆＃34;是我的div的类，

我得到的正是我想要的风格，但它只适用于课程.element的最后一个div！给出了这个：

有任何线索吗？

Answer 1

将position属性设置为相对于.element选择器。

Answer 2

是的，菜单项（元素1，元素2和元素3）未定位。他们是static。包含它们的元素包含position（absolute，fixed或relative），这会导致after将该元素作为参考把他们放在自己身上。

在元素上设置相对位置可以解决您的问题：

.element {
    position: relative;
}
.element:after {
    content: "";
    background: -webkit-linear-gradient(left, #343738 0%, #e07051 100%);
    display: block;
    height: 4px;
    width: 400px;
    position: absolute;
    bottom: 0;
}