css伪向下箭头:after not showing up on all tags

Question

我正在为每个 <section> 分配一个唯一的 ID将在我的页面上显示 :after 伪向下箭头指示器的标记。例如……

#welcome {
    background-color: #007ee5;
    color: #fff;
    position: relative;
}

#welcome:after {
    content: "";
    width:0px;
    height:0px;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-top:31px solid #007ee5;
    position:absolute;
    bottom:-30px; 
    left: 50%;
    margin-left: -30px;
}

上面的代码工作正常，我得到了 id="welcome"<section id="welcome"> 的预期结果。标签。

这是页面:my page

当我将另一个 ID 添加到另一个 <section id="example"> 时标记在它显示的页面下方，但它从另一个标记中消失了？？？？

我想在每个部分后面有一个向下箭头指示器，以匹配不同的颜色。

我已经尝试了几种不同的方法，但都没有达到预期的效果。

是级联中的东西吗？我已经为 <section> 尝试了一个全局元素标记，但我无法更改指示器颜色以匹配每个部分。

Answer 1

当您将 position: relative 应用于后续部分时，它会更改它们的 z-index。将 z-index 应用于您的 :after 伪类。

例如z-index: 100

#welcome:after {
    content: "";
    width:0px;
    height:0px;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-top:31px solid #007ee5;
    position:absolute;
    bottom:-30px; 
    left: 50%;
    margin-left: -30px;
    z-index: 100;
}