Better option than using nested elements for this layout?

[csdude55]

I'm creating a title area that looks like this:

__ This is the title ________

I've been doing it like this for year:

<style>
div.container {
 border-bottom: 1px solid #BFBFBF;
 margin-bottom: 10px;
 width: 90%;
}

span.title {
 position: relative;
 top: 5px;
 left: 15px;
 background: #FFF;
 padding: 0 7px;
 font-weight: bold;
}
</style>

<div class="container">
 <span class="title">
  This is the title
 </span>
</div>

But now I'm trying to make it smaller. I realize that I can do this to get virtually the same effect and save about 50 bytes (which is so small as to be irrelevant, I know), but the line is in the middle instead of at the baseline and the width is slightly longer (not sure why):

<style>
fieldset.container {
 border: none;
 border-top: 1px solid #BFBFBF;
 width: 90%;
}

legend.title {
 padding: 0 7px;
 font-weight: bold;
}
</style>

<fieldset class="container">
 <legend class="title">
  This is the title
 </legend>
</fieldset>

See it in action:

[jsfiddle.net...]

But before I go through my site and change all of these, can you guys and gals suggest any other way to get this effect that might be even smaller, or otherwise "better"?

[coothead]

Hi there csdude55,

here is a basic example...

[codepen.io ]

HTML:-

 <h1>This is the title</h1>

CSS:-

body {
 font: normal 1em / 1.5em verdana, helvetica, arial, sans-serif;
 }

h1 {
 display: flex;
 width: 90%;
 font-size: 1.25em;
 }

h1:before, 
h1:after{
 content: '';
 flex: 0 0 1em;
 margin: 0 0.25em;
 border-bottom: 1px solid #bfbfbf;
 }

h1:after {
 flex: 1;
 }

birdbrain - senior member since Oct 2, 2003

[csdude55]

That's awesome, thanks!

Can't use an H1, though... I'm actually using all of my H1-H6 tags for other things :-( I'll start another thread on that in the HTML section, though. Thanks again!