CSS allows some pretty amazing things when it come to customizing your web site. Just check out CSS Zen Garden to see how the exact same HTML content can look amazingly different through the power of pure CSS.

Amazing examples of CSS from CSS Zen Garden

Amazing examples of CSS from CSS Zen Garden

In this short tip I show you how you can add some custom content to sections of your website using pure CSS.

content_css

The video

 

The CSS

In this video I use the CSS “content” property to insert some text after the size fields on the product information page. i.e.

#item {
   content: "Add your text content here";
}

The CSS I used in this video:

#tab_product_details ul.add > li:first-of-type::after {
   background: yellow none repeat scroll 0 0;
   border: 1px solid orange;
   border-radius: 6px;
   box-sizing: border-box;
   content: "Please refer to the sizing chart when selecting your sizes.";
   display: inline-block;
   margin: 10px 0;
   padding: 10px;
   width: 100%;
}

Happy Deco’ing!

Share.

About Author

Brenden started his career as an embroidery digitizer and screen print designer in the late 1990s. Later he joined Wilcom in the role of technical support and advanced through to product management, strategy and later marketing manager. Brenden is currently Product Marketing Manager for DecoNetwork and continues his passionate journey in the custom decorated goods industry.

Leave A Reply