When using ::after pseudo element for bottom border, it appears after every list item which is in th-CodePudding

I am using pseudo-element for making something like division line between sections, so far it worked perfectly fine until I had list of items, now that division line is appearing after every <strong> and <li> tag. I have tried everything including giving last <li> a class than using pseudo element on it in which case it just makes the border beneath the word in <strong> tag, and completely ignores the rest of the list item.

#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>

CodePudding user response：

just add the tag after the pseudo css class should be triggered. that it ;-)

#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>

CodePudding user response：

If you want to only below id #OurPart don't leave a space between pseudo

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

If you want design below li or p tags than made some changes as in below snippet ( i.e, more specific to the tags )

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>