Skip to content
Back Home
  • Customizr Pro
  • Hueman Pro
  • Nimble Page Builder
  • Blog
  • Search
Back Home
  • Customizr Pro
  • Hueman Pro
  • Nimble Page Builder
  • Blog
Home » Snippets » Adding content before and after the logo with CSS only
code snippets css Logo

Adding content before and after the logo with CSS only

by Nicolas|Published 23 October 2013

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

You can search the user’s forum or ask the user community by opening a new thread in the Customizr theme forum. Before opening a new topic, you might want to follow the troubleshooting steps..

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!

AUTHOR

Nicolas
Hi! I'm Nicolas (@presscustomizr), the lead developer of the Customizr Theme and the Hueman Theme. My team and I are working everyday to help you publish your WordPress content the best possible way. We love to do it!Thanks for visiting this website, feel free to drop us a line !
0 posts

You may also like

Center Header Block Items (3.1/3.2)
Published 9 October 2013

Center Header Block Items (3.1/3.2)

If you need to center Header Block Items, 3.2.* release created more options for doing this in the Customize>Header panel reducing the […]

Move the featured pages block anywhere on front page
Published 30 October 2013

Move the featured pages block anywhere on front page

Howdy, Here’s a simple recipe to change the featured pages block position in Customizr, we two lines of code! Like for the slider […]

Move Post Meta before Title
Published 14 March 2016

Move Post Meta before Title

If you want to have the post metas of your single posts displayed before the title and not after the title, add […]

Removing the Help and Customiz’it admin bar buttons
Published 7 November 2013

Removing the Help and Customiz’it admin bar buttons

Update : the Customiz’it button has been removed since v3.1.12 of the theme   Howdy developer! Even if I have tried to style […]

Impress your visitors with a perfect experience on smartphones

customizr-pro-screenshot

10K+ small businesses are already using the Customizr Pro WordPress theme for their online presence.

Discover Customizr Pro

Post navigation

  • Previous post Embedding a Youtube video the right way in Customizr
  • Back to post list
  • Next post Remove categories and tags buttons in the post metas block
Useful pages
  • Your account
  • Product Support
  • Documentation
  • WP code snippets for Customizr theme
  • Work with us
Company
  • About
  • Blog
  • Privacy Policy
  • Terms of sale
  • Contact Us
Products and Services
  • Customizr Pro
  • Hueman Pro
  • Customizr WordPress Theme
  • Hueman WordPress Theme
  • Nimble Builder

© 2021 Press Customizr – All rights reserved