Add Rule Between Posts on Category Page

Hi there,

try this CSS:

.archive .post {
    border-bottom: 1px solid #000;
    margin-bottom: 40px; /* Optional to increase space between posts */
}

That works.

How can I make it shorter so it doesn't span the width of the container, but is in the center.

Thanks.

Bit trickier - this method allows the most flexibility:

.archive .post {
  position: relative;
  margin-bottom: 40px; /* Optional to increase space between posts */
}

.archive .post:after {
  content: '';
  position: absolute;
  width: 50%; /* Set width of border */
  height: 1px; /* Set thickness */
  left: 50%; /* Set width */
  bottom: 0;
  transform: translatex(-50%);
  background-color: #000; /* Set color */
}

David, that is exactly what I wanted.

Thanks so much.

Glad to hear that!

Hi.

I don't like how close the rule is to the last item on my archive page. See screenshot.

Is there anything I can do to modify that?

Simplest method would be to remove it after the last post.
If thats acceptable change this line in the CSS:

.archive .post:after {

to:

.archive .post:not(:last-child):after {

Thank you, David.

You're welcome