Page Specific CSS

I would like to add a down arrow to the homepage of the website that I edit, and only that page.

I found this code online, and when I plugged it into the CSS editor, it worked for all pages, but I want to know how to make it specific to the homepage banner.

.banner-thumbnail-wrapper:after {
 content: "\e02d";
 display: inline-block;
 position: absolute;
 z-index: 100;
 color: #fff;
 width: 100%;
 text-align: center;
 font-family: 'squarespace-ui-font';
 transform: rotate(90deg);
 cursor: pointer;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 32px;
 margin-top: 100px;
}

Use this code

.homepage .banner-thumbnail-wrapper:after {
 content: "\e02d";
 display: inline-block;
 position: absolute;
 z-index: 100;
 color: #fff;
 width: 100%;
 text-align: center;
 font-family: 'squarespace-ui-font';
 transform: rotate(90deg);
 cursor: pointer;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 32px;
 margin-top: 100px;
}

How would I do it if I have a scrolling banner on the homepage?

On 4/22/2020 at 10:47 PM, oswaldtay said:

How would I do it if I have a scrolling banner on the homepage?

Can you take screenshot scrolling banner?