我的 css ::after 仅适用于最后一个元素 [关闭]答案

【问题标题】：My css ::after apply only on the last element [closed]我的 css ::after 仅适用于最后一个元素 [关闭]
【发布时间】：2017-05-17 14:47:55
【问题描述】：

我想在我的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;
}

“元素”是我的div的类，

我得到的正是我想要的样式，但它只适用于类 .element 的最后一个 div ！这给了这个：

有什么线索吗？

【问题讨论】：

请发minimal reproducible example
很可能是因为后面设置为position:absolute 和bottom: 0，所以它们都在底部堆叠在一起。
我们能看到html吗？
我们能看到.element的css吗？
请edit 你的问题成为主题：包括一个重复问题的minimal reproducible example。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括：(1) 期望的行为，(2) 特定问题或错误，以及 (3) 在问题本身。另请参阅：What topics can I ask about here? 和 How to Ask。这个问题是关于 JavaScript/HTML/CSS 的，所以你应该考虑使用snippet。

标签： html css gradient

【解决方案1】：

是的，菜单项（元素 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;
}

【讨论】：

【解决方案2】：

将位置属性设置为相对于您的 .element 选择器。

【讨论】：