CSS Tricks: Adding Text to a Title with :before & :after

Did you know you can use CSS's :before and :after pseudo-elements to include some additional text before or after a page's title? Here's a nerd's explanation of how pseudo-elements work.

Before getting started, we want to point out that your most important text should always remain in the actual Title field of the page, since :before/:after text does not get included in Google's search indexing. Also keep in mind that the pseudo-text will not appear in the app, so you should only use this trick to spruce up a page's appearance, not to add important content.

Now that we're all aware of the above, here's how you can use the trick on our sites:
1. Determine the selector of the element you want to add pseudo text to. Right click on that page element and choose "inspect". This will open your browser's developer tools. Click the little "+" sign and a new CSS selector will appear in the dev tools window. Copy that text.

For example, if I want to add some text before the title of a List user page, I follow the steps and find out that element's selector is h1.ds-detail-title  


2. Paste that element into your page's custom CSS file. Then, if you want to add text above the title, add :before onto the end of the selector. To add text below the title, add :after onto the selector.
h1.ds-detail-title:before
h1.ds-detail-title:after

3. For :before and :after, the first CSS rule always needs to be "content" + your custom text, in the format of...
content: 'My custom text'

For example, let's add the text "HOT NOODZ" above the title:
h1.ds-detail-title:before {
content:'HOT NOODZ';
display:block;
}


4. By default, the text will inherit the same styles as the element you're adding the text to, which is why in the screenshot above you see "HOT NOODZ" in the same size/color/font as the rest of the title.   But you can now add additional CSS rules to the snippet in order to make the custom text look different than the title:
h1.ds-detail-title:before {
content:'HOT NOODZ';
display:block;
font-size:.85em;
color:#ddb010;
font-family: courier;
letter-spacing:4px;
}



5. Save the CSS to your page and do a hard refresh on the frontend to see your recent changes.

6. Quesitons?  Holler at support@dostuffmedia.com and we'll help you get it right.

Comments