Styling headers, need help with accent details

HTML & CSS
1

I am doing a much needed overhaul of the typography of one of my sites and I had an idea for how to do the headers that I am not quite sure how to pull off.

I’d like to make the headers, in particular on the sidebars, stand out a little more and my idea was to have them left-aligned and accented with an underline that begins (to the left) in a coloured square. It would sort of be a flipped version of my index on http://www.westeros.org/.

Or, in an attempt to illustrate:

HEADER

##--------------------

The coloured square and/or the underline could be either just a colour value or a background texture.

Any suggestions for how to go about this or something similar?

2

The coloured square and/or the underline could be either just a colour value or a background texture.
Hi,
You would get much better support and cleaner code if you were to make it a background image. Then you could include both squares and the underline in the image and position it at left bottom of your heading.

I did put together a version that uses no images. I am using a couple of pseudo :before elements so that leaves IE6/7 out in the cold. But it keeps the markup cleaner.

As I understand your example you could do this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    font: 100%/1.2 arial,helvetica,sans-serif;
    background:#FFF;
}
div {
    width:250px;
    background:#EEF;
}
h2 {
    margin:0;
    padding:5px;
    font-size:1.4em;
    background:#CCC;
}
h2:before {
    content:"";
    display:inline-block;
    width:10px; height:10px;
    margin-right:5px;
    vertical-align:middle;
    background:blue;
}
h2 span {
    display:block;
    border-bottom:2px solid blue;
}
h2 span:before {
    content:"";
    display:block;
    width:10px; height:8px;
    background:blue;
}
</style>

</head>
<body>

<div>
    <h2>Column Heading<span></span></h2>
        <p>following content here</p>
        <p>following content here</p>
    <h2>Column Heading<span></span></h2>
        <p>following content here</p>
        <p>following content here</p>
</div>

</body>
</html>
3

Thank you, will go over your example and see how it works for me.

My main concern with making it images was that I wanted to apply it to headers of different sizes and didn’t want to be stuck making a bunch of different images.