I have been using a pseudo-element to create a division line between sections, and it was working perfectly until I added a list of items. Now, the division line is appearing after every <strong> and <li> tag. I have tried various approaches, such as giving the last <li> a class and applying the pseudo element to it, but it only creates a border below the word in the <strong> tag and 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's not surprising that many businesses are stuck in a cycle of repetitive actions, hoping for a change that never comes. True success doesn't come from repetition—it requires game-changing shifts in understanding perceptions, needs, and expectations from stakeholders and audiences. By transforming foresight into effective strategies, we develop sustainable growth plans for your business. Our expertise combines industry knowledge with analytics to generate innovative ideas and strategies that lead to success. We help businesses envision their future and achieve better outcomes through strategic thinking and commercial excellence. We're strategists, innovators, and problem solvers operating at the intersection of foresight and strategy to deliver winning solutions. We turn demand into value by
</p>
<ul>
<li><strong>INVESTIGATION</strong>—by engaging with your target market and addressing their pain points</li>
<li><strong>UNLOCKING</strong> insights with business acumen</li>
<li><strong>ANCHORING</strong> strategy in market foresights to create actionable business plans</li>
</ul>
</div>