创建一个位于除了最后一个列表项之外所有内容下方的三角形。

huangapple go评论61阅读模式
英文:

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

&lt;ul class=&quot;steps-ul&quot;&gt;
  &lt;li&gt; Step 1: Hardware Mounting &lt;/li&gt;
  &lt;li&gt; Step 2: Hardware Connection &lt;/li&gt;
  &lt;li&gt; Step 3: Devices Connection &lt;/li&gt;
  &lt;li&gt; Step 4: Initial Test &lt;/li&gt;
&lt;/ul&gt;

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: &quot; &quot;;
  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: &quot; &quot;;
  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.

huangapple
  • 本文由 发表于 2023年4月6日 22:55:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/75950925.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定