代码之家 › 专栏 › 技术社区 › Mike C.

css伪下箭头:未在所有标签上显示后

pseudo-element css

Mike C. · 技术社区 · 7 年前

<section> 标记,该标记将在我的页面上显示: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添加到另一个ID时 <section id="example">

我想一个向下箭头指示后,每个部分不同的颜色相匹配。

是瀑布里的什么东西吗?我尝试了一个全局元素 <截面(>);

1 回复 | 直到 7 年前

fubar 7 年前

当你申请时 position: relative 在接下来的章节中,它改变了 z-index z指数 :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;
}

推荐文章

Sahil Singh · 使用css在导航栏中定位时出现问题

2 年前

Mike C. · css伪下箭头:未在所有标签上显示后

7 年前

Rusletov · 使元素与浮动元素的边界相邻

7 年前

Hatem · SASS-将更改器应用于::当:悬停后

7 年前

Hacker · 在文本输入中放置美元符号

7 年前

o.danielcoker · CSS-定位伪元素

7 年前

titlu · :选中的伪类选择器在CSS上不工作

7 年前

user7262544 · 如何将变量添加到伪类的jquery选择器?

7 年前

Chris · 伪元素:after正在添加before

8 年前

Russel Riehle · 如何基于父项的右边缘打开超出的子菜单区域?

8 年前