当对底部边框使用 ::after 伪元素时，它出现在 div 中的每个列表项之后

Question

我正在使用伪元素在部分之间制作分界线之类的东西，到目前为止它工作得很好，直到我有了项目列表，现在分界线出现在每个 <strong> 和 [=14 之后=] 标签。我已经尝试了所有方法，包括给 last <li> 一个 class 而不是在其上使用伪元素，在这种情况下，它只是在 <strong> 标签中的单词下方制作边框，并完全忽略其余部分列表项。

#OurPart ::after {
  content: "";
  display: block;
  margin: 30px auto 30px;
  width: 20%;
  border-bottom: solid 2px #5d9cd4;
}

<div id="OurPart">
  <p>
    It comes as no surprise that more and more businesses are repeating everyday moves hoping that this repetition will bring a change desperately needed. The success will not come from repetition. It comes from game-changing shifts that requires different
    way in understanding of perceptions, needs and expectations from key stakeholders and target audiences. By turning foresight into compelling strategies, we create credible and lasting growth strategies for your business. We combine our deep industry
    knowledge with analytics expertise to co-create innovative thinking and strategies that lead you to success. We enable businesses re-imagine their future and transform their outcomes with commercial excellence. We are strategic thinkers, opportunity
    explorers and designers. We operate in a space where foresight meets strategic thinking to unlock winning thoughts and solutions. We turn demand into value through
  </p>
  <ul>
    <li><strong>INVESTIGATION</strong>, by talking to your targeted market and learning about their pain points</li>
    <li><strong>UNLOCKING</strong> those insights with business acumen</li>
    <li><strong>ANCHORING</strong> strategy in these strong market foresights and turn it to actionable business plans</li>
  </ul>
</div>

Answer 1

如果你只想在 id #OurPart 以下，请不要在 pseudo

之间留下 space

You have used #OurPart ::after instead use #OurPart::after

如果您想在 li 或 p 标签下方进行设计，而不是按照下面的代码片段进行一些更改（即更具体地针对标签）

If you want only on last li tag than use last-child like this
#OurPart li:last-child::after

#OurPart p::after {
  content: "";
  display: block;
  margin: 30px auto 30px;
  width: 20%;
  border-bottom: solid 2px #5d9cd4;
}

#OurPart li::after {
  content: "";
  display: block;
  margin: 30px auto 30px;
  width: 20%;
  border-bottom: solid 2px #5d9cd4;
}

<div id="OurPart">
  <p> It comes as no surprise that more and more businesses are repeating everyday moves hoping that this repetition will bring a change desperately needed. The success will not come from repetition. It comes from game-changing shifts that requires different
    way in understanding of perceptions, needs and expectations from key stakeholders and target audiences. By turning foresight into compelling strategies, we create credible and lasting growth strategies for your business. We combine our deep industry
    knowledge with analytics expertise to co-create innovative thinking and strategies that lead you to success. We enable businesses re-imagine their future and transform their outcomes with commercial excellence. We are strategic thinkers, opportunity
    explorers and designers. We operate in a space where foresight meets strategic thinking to unlock winning thoughts and solutions. We turn demand into value through </p>
  <ul>
    <li><strong>INVESTIGATION</strong>, by talking to your targeted market and learning about their pain points</li>
    <li><strong>UNLOCKING</strong> those insights with business acumen</li>
    <li><strong>ANCHORING</strong> strategy in these strong market foresights and turn it to actionable business plans</li>
  </ul>
</div>

Answer 2

只需在应该触发伪 css class 之后添加标签。它 ;-)

#OurPart li::after{
    content: "";
    display: block;
    margin: 30px auto 30px;
    width: 20%;
    border-bottom: solid 2px #5d9cd4;
}

<div id="OurPart">
  <p>It comes as no surprise that more and more businesses are repeating..</p>
  <ul>
    <li><strong>INVESTIGATION</strong>, by talking to your targeted market and learning about their pain points</li>
    <li><strong>UNLOCKING</strong> those insights with business acumen</li>
    <li><strong>ANCHORING</strong> strategy in these strong market foresights and turn it to actionable business plans</li>
  </ul>
</div>

当对底部边框使用 ::after 伪元素时，它出现在 div 中的每个列表项之后

When using ::after pseudo element for bottom border, it appears after every list item which is in the div

html

css

pseudo-element