CODEWITHSUNDEEP
csscss-selectorspseudo-elementpseudo-class
David Eyk
David Eyk

Reputation: 12591

How to select ::after when followed by a p

Given this HTML:

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
</div>

I would like a nice dingbat in place of very last horizontal rule, and a blank line for the first one.

However, consider this HTML:

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Here, there should be a blank line for the hr, and no dingbat.

I was thinking I would put the dingbat in the content after each hr, then remove the content for any HR followed by a p:

hr {
  border: 0;
  text-align: center;
}
hr::after {
  content: "❧"
}

hr::after + p {
  content: "";
}

That last rule, of course, doesn't work. :)

How do I set the ::after content only when followed by a p? Or, is there a way to select only the last occurrence of the hr if it has no following element?

Upvotes: 0

Views: 135

Answers (2)

BoltClock
BoltClock

Reputation: 724462

Someone will point out to you, correctly, that there is no previous sibling selector, but you don't need one for this.

You can simply apply the dingbat to hr only when it's the last child like so:

div {
  margin-bottom: 1em;
  border: medium solid;
  padding: 0 0.5em;
}
hr {
  border: 0;
  text-align: center;
}
hr:last-child::after {
  content: "❧"
}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
</div>

Upvotes: 4

Temani Afif
Temani Afif

Reputation: 274096

You can simplify and only consider the p element without hr:

Not for the last

p:not(:last-child)::after {
  content: "❧";
  display:block;
  text-align:center
}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Only for the last:

p:last-child::after {
  content: "❧";
  display:block;
  text-align:center
}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Upvotes: 1

Related Questions