Question

Here’s an image showing what I’m trying to pull off.

So, a line to the left and right of any given text (typically would be some sort of of heading tag), that extends a certain distance on each side of the text (in this case, 65px).

I need something that is fluid in relation to the text itself…the overall width can’t be fixed.

Answer 1

This solution is the one that’s worked best for me in the past, you can se the example here. The code uses ::before and ::after pseudo classes to create the lines and then applies display:table to the text so the box adapts to it’s content (I’ve used h2 for the example) This type of design is normally centered so I’ve added the margin: 1em auto;
Doing it this way, you don’t need to add any extra html. Hope it helps.

h2{
    display:table; 
    margin: 1em auto;
}
h2:before, h2:after{
    content:"";
    display: block;
    border-top: 1px solid #ccc;
    width: 65px;
    margin-top:.5em;
}
h2:before{
    float: left;
    margin-right:3px;
}
h2:after{
    float:right;
    margin-left:3px;
}

​