Q:

CSS - How to create a title background with a circle and a line-gradient?

I want to create a title with a background like this:

But there is a problem, as you can see in the picture, there are 3 different backgrounds:

The first one is for the whole page
second one is just a circle
third is a black line.

I want to create this title but i have problems with backgrounds.
I've tried including Span tag into title h3 ... didn't work.
what should I do?
P.S: I want to make this background for all titles backgrounds, so I don't want to create just one background for one title, I want it to be responsive and look good on any title.

A:

the markup   
 <h3>Meet the Team</h3>

the style
h3{
    width:320px;
    height:40px;
    text-align:left;
    background:black;
    color:red;
    padding:10px;
    line-height:40px;
    position:relative;
}

h3:before,h3:after{
    position:absolute;
    content:'';
}
h3:before{
   width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #2C2C2C;
    right: 174px;
    top: 20px;
    box-shadow: inset -2px -1px #3F3D3D;    
}

h3:after{
    width:160px;
    height:4px;
    background:red;
    background: #2C2C2C;
    right: 14px;
    top: 28px;
    box-shadow: inset -2px -1px #3F3D3D; 
}

Demo:http://jsfiddle.net/9U8NQ/

