Separate css border with background icon

Question

I am trying to split a border with a background image. I do not know if this is possible. Hope someone can help me find a good clean way to achieve this.

I am trying to get the bottom one and the top one that I have right now.

.tinybanner h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    border-bottom: 1px solid $green;
    display: inline-block;
    @include adjust-font-size-to(24px);
    background: url('images/tinybanner.png') center bottom no-repeat;
}

Answer 1

Using the pseudo selector :after, you can add an element after each h1:

h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    border-bottom: 1px solid green;
    display: inline-block;
    position: relative;
}
h1:after {
    position: absolute;
    left: 50%; /* center the element */
    margin-left: -15px; /* shift left by (width+border)/2 */
    display: block;
    content: ''; 
    width: 20px;
    height: 20px;
    background: green; /* this can of course be a background image, too */
    border: 10px solid white; /* adds a gap to the left and right */
}

, , , . - :after, - ( ​​ h1, ) ( h1:after).

http://jsfiddle.net/stevemchey/YFXGa/

Answer 2

sudo- :after :

.tinybanner h1 {
    padding-bottom: 0.5em;
    margin-bottom: 50px;
    display: inline-block;
    @include adjust-font-size-to(24px);
    background: url('http://placekitten.com/10/20') center bottom no-repeat;
}

.tinybanner h1:after {
    height:1px;
    content:'';
    display:block;
    border-left: 40px solid #00ff00; 
    border-right:40px solid #00ff00;
}

http://jsfiddle.net/bhlaird/XSdbs/