Block title with link

I added this code for custom css style to change look of block title, and everything is perfect, but if i put link for block title, my custom style not working. What i need to ad in my code to resolve this?

.block-title span {
background-color: transparent !important;
position: relative;
border-radius: 0;
padding: 3px 70px 3px 20px;
}
.block-title span:before {
content: ”;
background-color: red;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
border-radius: 3px;
}

example:
http://prntscr.com/8udpc1

Hi

Replace the above css with this one: http://screencast.com/t/pUEqb7CbVUe

.block-title span, .block-title > a {
background-color: transparent !important;
position: relative;
border-radius: 0;
padding: 3px 70px 3px 20px;
}
.block-title span:before, .block-title > a:before {
content: '';
background-color: red;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
border-radius: 3px;
}

Basically you need to add this selectors to the css code: .block-title > a, .block-title > a:before

Thanks!

Code is changed but still same, block title with link have diferent look.

Update:
My mistake, this part work very good!

• This reply was modified 10 years by vladica79.