Using the :before and :after Pseudo Elements on Sidebar Titles
tmirror
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 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:
</head> Step 2. Just above it, copy and paste this code:
<style>
.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: …
