[Resolved] How to show containers between each blog post?

[Heath]

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?

[Elvin]

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: "";
}

[Heath]

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?

[Elvin]

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;

[Heath]

Thank you for all the help!

[Elvin]

Nice one. No problem. 😀

[Author]

Posts