This CSS code enables you to display a ribbon on the corner of single posts and/or archive pages.
You can also use text in the CSS to display inside the ribbon like this:
Simply copy and paste this CSS into your themes style.css file near the end of the file.
You need to subscribe to fully access this tutorial.
Theme Running XHTML Not HTML 5?
Simply replace the dot . before the class with a hash #
Change Ribbon Text
To change the text in the ribbon, simply change this text in this line of the CSS code:
CSS ::before and ::after Selector Classes
You can use either the ::before or ::after selector classes to insert text into a ribbon and add it to the corner of any HTML element.
You can also use a single colon (:) or double colon (::).
Browser Support for Single (CSS2) & Double (CSS3) Colon Usage
Some old browsers that not many people use may not support the use of the double colon CSS 3 supports.
In that case, you may need to use the single colon like this :before or :after.
- Tested on the Genesis Sample theme by StudioPress