Using the :before and :after Pseudo Elements on Sidebar Titles


Tutorials - Tutorials

User Rating: / 0

Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.

The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger.

How to Add Adobe-like Headers to Blogger

blogger gadgets, blogger tricks, blogger blogspot

Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:
Step 2. Just above it, copy and paste this code:
.module h2 {
  background-color: #D5D5D5;
  border-radius: 20px 0 0 20px;
  color: #FFFFFF;
  font-family: Verdana;
  font-size: 14px;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
.module h2 a:hover {
  padding: 0 32px;

.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
} h2 a {background-color: #A2D5EC;} h2 a:hover {background-color: #C5F0FF;} h2 a:after {border-right: 6px solid #A2D5EC;} h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;} h2 a {background-color: #bada55;} h2 a:hover {background: #C7E176;} h2 a:after {border-right: 6px solid #bada55;} h2 a:hover:after {border-right-color: #C7E176;} h2 a {background-color: #F0A5B5;} h2 a:hover {background-color: #FFC7D2;} h2 a:after {border-right: 6px solid #F0A5B5;} h2 a:hover:after {border-right-color: #FFC7D2;}
Step 3. Save the Template.


Step 4. Now go to Layout and Add a new HTML/JavaScript Gadget with one of the codes below for each of the widget title:

Background in blue:
<div class="module blue">
<h2>Title in <a href="/Link URL">Blue</a></h2>
Background in yellow:
<div class="module yellow">
<h2>Title in <a href="/Link URL">Yellow</a></h2>
Background in green:
<div class="module green">
<h2>Title in <a href="/Link URL">Green</a></h2>
Background in red:
<div class="module red">
<h2>Title in <a href="/Link URL">Red</a></h2>

Note: Change "Title in" text with your widget's title and Blue, Yellow, Green and Red with the text on the right, then add a Link URL to it.
Step 5. After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and Save the Arrangement.
blogger tricks, blogger tutorials


You can see how the sidebar titles has been replaced with some cool header bars on this demo blog.

About Us

Royal Developer Top three Web Designing and Web Development Company in Dehradun, Uttarakhand, India. Royal Developer Best SEO Company in Dehradun takes pride in its philosophy of 'Employee First' which empowers to create a real value for the customers. Royal Developer can offer Best and cheap Website Development Software Development & SEO Services. We are the Best service Provider of SEO, SEM, SMO ServicesCompany in Uttarakhand. Web Designing Course in Dehradun, Web Designing Classes in Dehradun, Web Design Training Institute in Dehradun, Web designing institute in dehradun, Best institute for web designing in dehradun, Web development training in dehradun, Web development course in dehradun, Web Designing Training in Dehradun.


- Contact Information - 

Add : RDIT Services Pvt Ltd, 3rd Floor, RGM Plaza, Above Chandu Canteen,
          23 Chakrata Road, Dehradun - 248001, Uttarakhand, India

Email : 


 : +91 8171200108, +91 8979462451,
                                  +91 7895753921

Quick Enquiry Form

Enter your full name

Enter your valid email address

Enter your correct mobile number

Invalid Input

Your Message
Invalid Input

Enter Code
Enter Code
  RefreshInvalid Input


You are here: Home Tutorials Using the :before and :after Pseudo Elements on Sidebar Titles