英文:
Creating a triangle centered below all but last list items
问题
I want to create a triangle below the center of each li
element but not the last one.
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;
}
Here's a screenshot of what I would like to accomplish: Link
I attempted using the ::after
pseudo-element within CSS but no results.
英文:
I want to create a triangle below the center of each li
element but not the last one.
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;
}
Heres a screenshot of what i would like to accomplish
I attempted using the ::after
psuedo element within css but no results.
答案1
得分: -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)
选择器。
英文:
Your ::after
selector is missing a content
property, which is required for pseudo elements to be displayed.
.steps-ul li::after {
content: " ";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Copied the triangle code from this question.
As for not adding the triangle to the last element, you can use the :not(:last-child)
selector.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论