Sidebar Box CSS styling Question

Hi Anthony,

Can you link us to your site and point us to the sidebar section where you want to style?

Hi Ying. Sure.

Here is a page from my category that will have that box.

https://mobilitymedicalsupply.com/best-manual-wheelchairs/

Sidebar box says: Manual Wheelchair Guides

To add number before the titles:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(1) a:before {
    content: "1";
}
.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(2) a:before {
    content: "2";
}
.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(3) a:before {
    content: "3";
}
.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(4) a:before {
    content: "4";
}
.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(5) a:before {
    content: "5";
}

To style the numbers:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li a:before {
    margin-right: 20px;
    font-size: 25px;
    color: grey;
}

To change the title color to black:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li a {
    color: black;
}

To add underlines to titles:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dotted lightgrey;
}

Okay thanks Ying. I can drop this CSS into Additional CSS field? Appearance -> Customize -> Additional CSS?

Yes, correct :)

Okay I dropped that CSS code in. I don't see any changes. I cleared my Cache. Maybe I got something wrong? Is this because I am using the Content aware sidebar plugin to show posts that belong to certain category?

Do you have any other CSS in the additional CSS field?

If so, can you add my CSS to the top of the field before other CSS?

I do have a little. Okay let me try.

That fixed it. Thank you again Ying.

Thanks Yin for the help. One last thing. Is there a way for me to make the links bold and font larger and when you hover over them they turn blue? In the text CSS can get the text so it does not go under the number for longer titles? So it stays in line with the beginning of the link?

You see 3, 4, and 5 how they go under the number?

https://mobilitymedicalsupply.com/heavy-duty-manual-wheelchairs/

Hover title color:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:hover a {
    color: #1e73be;
}

Change this CSS:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li a {
    color: black;
}

to:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li a {
    color: black;
    font-size: 1.2em;
    display: flex;
    align-items: center;
}

Perfect. Thanks Ying for all the help! We can close this if need be.

You are welcome :)