Header With "Part" Strikethrough

[hybrid kill3r]

Ok, so it's kind of hard for me to explain this, so I'm going to show you as well. I want a heading that has a line through it gonig all the way across to the other side of the div, but I don't want it to go through the heading. Here's what I mean: How would I achieve something like this?

[Labtec]

Hi take a look at this code, not the best codewise but it works!

<div id="container">    <h2 id="recruit_heading">NEW RECRUITS</h2><hr id="first_hr" noshade="noshade" />    <hr class="hidden" />    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <div class="multiple_divs"></div>    <hr id="second_hr" noshade="noshade" />    <h2 id="players_heading">VIEW ALL PLAYERS</h2>    <hr class="hidden" /></div>

CSS:

h2{    color: #c0c0c0;}#container{    background-color: #545353;    border: 1px solid #000;    width: 58%;    padding: 1%;}#recruit_heading{    margin: 0px 20px 0px 0px;    float: left;}#first_hr{    color: yellow;    background: yellow;    border: 1px solid yellow;}.multiple_divs{    border: 1px solid #c0c0c0;    width: 17.5%;    margin: 1%;    float: left;    height: 100px;}#second_hr{    color: yellow;    background: yellow;    border: 1px solid yellow;    clear: left;    float: left;    width: 60%;}#players_heading{    margin: 1%;    float: right;}.hidden{    visibility: hidden;    clear: both;}

Hope it helps, Regards, Lab

[thescientist]

if the size of the line is going to be fixed, then just use an image tag. If it could repeat variably, you could use a <span> and give it

span.strike-through{  display: inline-block;  height:  10px; //or whatever  width:  100px //or whatever  background-image: url("path/to/image.jpg");  background-repeat: repeat-x;} //...//<span class="strike-through"><span>

Edited December 25, 2012 by thescientist