在除最后一个列表项外的所有列表项下方创建居中三角形

Question

我想在每个li元素的中心下方创建一个三角形，但不是最后一个。

html

<ul class="steps-ul">
<li> Step 1: Hardware Mounting </li>
<li> Step 2: Hardware Connection </li>
<li> Step 3: Devices Connection </li>
<li> Step 4: Initial Test </li>
</ul>

css

.steps-ul {
list-style-type: none;
width: 500px;
text-align: center;
}
.steps-ul li:nth-child(odd) {
background-color:#efefef;
}
.steps-ul li:nth-child(odd)::after {
border-top: 20px solid #efefef;
}
.steps-ul li {
margin: 20px;
padding: 10px;
font-size: 1.5em;
background-color:#d7d7d7;
}
.steps-ul li::after {
position: absolute;
left: 270px;
margin-top: 30px;
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d7d7d7;
}

这是我想要完成的屏幕截图

我尝试在css中使用::afterpsuedo元素，但没有结果。

Answer 1

您的::after选择器缺少content属性，这是显示伪元素所必需的。

.steps-ul li::after {
content: " ";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

从这个问题中复制三角形代码。

至于不将三角形添加到最后一个元素，您可以使用:not(:last-child)选择器。