When looking at the markup below:
<div>
<p>hello world</p>
</div>
<div>
<h4>hello world</h4>
</div>
Is it possible to achieve the following styling using CSS:
div:after {
content: "";
display: block;
border-bottom: 2px solid red;
}
p + div:after {
content: "";
display: block;
border-bottom: 2px solid blue;
}
This would mean that all :after pseudo elements immediately following a <p> have a blue border, while all others have a red border.
The approach mentioned in this example link doesn't seem to work as expected. This is because the + sign is applying to the 'div' selector rather than the 'div:after' selector as a whole. Is there an alternative way to target these elements in CSS without introducing a new specific class or manipulating the DOM?