Add CSS Corner Ribbon To Page or Post Content

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:

CSS 3

Simply copy and paste this CSS into your themes style.css file near the end of the file.

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:

content: "Popular";

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.

Notes

• Tested on the Genesis Sample theme by StudioPress