Adding content before and after the logo with CSS only

Howdy Customizr designr!

Here’s a quick tip to simply add content before and after your text logo with CSS only.

We use the CSS pseudo classes  ::before  and ::after  to do that.

Important: in this example double quotes are escaped with ‘\’ to use the code in the custom css section. You can remove these if you use this code in the style.css file of your child theme.

.site-title::before{
content:\"Custom Text\";
color:#000;
font-size: 20px;
}
.site-title::after{
content:\"Custom Text\";
color:#000;
font-size: 20px;
}

You can play with the css properties to add padding, margins, borders …etc

Hope this will be useful for you!