html - Wordpress CSS - Site Title Design - First-letter

Question

I have been trying to customise the Astra theme of Wordpress to adjust the site title (just 2 words) via additional CSS.

I am trying to capitalise both words and display them as small caps at the same time (it refers to a brand logo so would need to look aesthetic - with an insert of the png file, it doesn't turn out as sharp as with the site title method). This works great with the below.

However, I am now trying to make the initial / first letters a little bit smaller as they show up quite big. In my research I found that this could be achieved with first-letter / initial-letter properties or p-elements (since it affects two words in one element). I have tried various versions and got nowhere with it.

Maybe someone on here has more experience with it and could help me out?

Thank you!

Specifically, I have added this code -->

    li.menu-item a {
font-family: fuesco;
font-size: 15px;
padding-top: 0px !important;
}

.site-title a {
  color: #9b8600 !important;
    font-size: 60px;
    font-variant: small-caps;
    text-transform: capitalize;
}

.site-content {
    padding-top: 0px;
}

.ast-site-identity {
    padding-bottom: 0em;
}

.site-title {
    transform: scale(1.3, 1.4);
}

.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

.site-header .main-header-bar {
    background: rgba(255,255,255, 0.9);
}

question from:https://stackoverflow.com/questions/66063591/wordpress-css-site-title-design-first-letter

Answer 1

Waitting for answers