Unsure if I should use a CSS pseudo-class, an hr, or an empty div for a separator between blog posts

HTML & CSS
1

Hello, I know this question may seem trivial, but I’m wondering which method is better for separating a list of forum topics with a solid 1px border. I can add this line to the article element as a pseudo-class like this:

article::after {
  content: "";
  display: block;
  margin: 4em 0;
  border-bottom: 1px dashed #2c3e50;
}

or I can use an empty div in the markup, like this:

<article>..</article>
<div class="separator"></div>
<article>..</article>
<div class="separator></div>
<article>..</article>

or just use an HR with a border-bottom between the blog posts:

<article>..</article>
<hr>
<article>..</article>
<hr>
<article>..</article>

The end result should look like this:

separator
separator1792×882 134 KB

I would be grateful for any suggestions. Thank you.

2

My preference would be to use border-bottom on the <article> elements, not inserting any unnecessary elements or pseudo-elements.

3

Thank you. I have a Read More button in the footer. If I need to add some margin above the separator line, I need to increase the margin-bottom of the footer in this case.

<article>
   content
   <footer>
         <p><a href="">Read more button</a></p>
   </footer>
</article>
4

. . . . or add padding-bottom to the <article> elements.

5

Here is a border bottom example.

Full Page View
https://codepen.io/Snady_Leiby/full/BagvPav

Editor View
https://codepen.io/Snady_Leiby/pen/BagvPav

6

The solutions you provided are very good, and I appreciate them a lot. I’ve received a lot of help on this forum, and you guys are truly amazing. I’ll take a look at the CodePen tomorrow since it’s late night here.

1 Like
7

Yes, just add this…

 article:last-of-type {
   border-bottom: 0;
 }
 article:last-of-type::after {
   display: none;
 }
1 Like
8

To avoid a border at the bottom of the last article, you can use::

article:not(:last-child) {
   border-bottom: 1px dashed #2c3e50;
 }
1 Like
9

Adding empty elements just for decoration should be avoided in 99.9% of cases unless there is absolutely no other way to do what you want.

An hr used to mean a horizontal rule but its semantics were redefined in html5 to indicate a thematic change between topics in the same section. It is no longer simply a line. Therefore an hr between articles would not be semantic as the article already defines that the section is a thematic change anyway.

As the other posters have demonstrated there is no need for extra elements just for presentational borders. :slight_smile:

3 Likes