css 伪向下箭头：未显示在所有 <section> 标签上之后

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 伪 class.

例如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;
}

css 伪向下箭头：未显示在所有 <section> 标签上之后

css pseudo down arrow :after not showing up on all <section> tags

css

pseudo-element