Site logo

Archived topic

How to show containers between each blog post?

5 replies · Started by Heath on September 30, 2020

Viewing posts 1–6 of 6

I am not using a static page but id like there to be a block or some sort of divider between each blog post. How do i make that happen?

Do you have any specific design/style in mind?

Here's a CSS code that displays a simple red divider between each blog post.

article.post:after {
    border-bottom: 2px solid red;
    display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    content: "";
}

I wanted a box around each one but I think something like this would work as well. Is there a way to get a box around it? How would I change the line to solid black?

I wanted a box around each one but I think something like this would work as well. Is there a way to get a box around it? How would I change the line to solid black?

If you to box around it instead of a line on the bottom, you can replace the previous code with this.

article.post {
    border-bottom: 2px solid black;
}

You can change the color value black in this part of the code border-bottom: 2px solid black; to any color you'd like.

Example:
border-bottom: 2px solid red;
or
border-bottom: 2px solid blue;
or
border-bottom: 2px solid black;

Thank you for all the help!

Nice one. No problem. :D

This archived topic is closed to new replies.