css Edit The Site Title in the Header

My client has her site title like this:

Renée Sentilles |  Original Art & Design

She would like it to look like this the one below. Which has a pipe and smaller text to the left.

I could make an image of it but I'd rather keep the text. Is there CSS that would make this work?

Thanks, Lots,

George Cartwright

Hi,

What is site url? We can help easier

I think we can use CSS code to add a small left + line on right of site title/or logo

Thank you Tuan, sorry to be so long to get back to you.

      I have a line underneath it but to the side might be better.
Here's the url:

https://reneesentilles.com/

On 3/5/2023 at 8:51 AM, gcart said:

Thank you Tuan, sorry to be so long to get back to you.

      I have a line underneath it but to the side might be better.
Here's the url:

 

https://reneesentilles.com/

Don't remove any code in your current code. Add this CSS

@media screen and (min-width:992px) {
a#site-title {
    display: flex;
    align-items: center;
}
/* add a line between 2 texts */
a#site-title:before {
    content: "";
    order: 2;
    height: 80px;
    display: block;
    width: 2px;
    background-color: black;
}
/* tagline size */
a#site-title:after {
    order: 3;
    padding-left: 20px;
    font-size: 14px;
}
}