Recently I wanted to use the ::after selector to add a line below each paragraph, but didn’t want the line after the last paragraph, so I needed to combine my CSS selectors ::after and :last-of-type.
Here is the look I wanted to create:
Sure, there are other ways of doing this, but here is the CSS I used:
.top p::after { content: ""; background: url("/wp-content/themes/jennifer/images/pink-divider.gif") 0 0 no-repeat; width: 83px; height: 3px; display: block; text-align: center; margin: 40px auto 0; } .top p:last-of-type::after { background: none !important; content: ""; }
You can see that my div class is “top” and I wanted the pink line to show after each paragraph except the last one. You can see it in action here:
http://jenniferdawncoaching.com/landing-page/website-design-consulting-services-for-women/
Mr C says
Thank you for this. It’s been driving me nuts for the last 15 minutes..
Laura Hartwig says
Glad it helped! 🙂