- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi,
I want to define a heading style that has a thin rule extend from the end of the heading across the rest of the column, something like this:
[attachment=0]sample.png[/attachment]
any ideas on how to do this dynamically?
Thanks!!
I can think of a way using negative margins and having the heading have a background of white… but I don’t like negative margins.
In the negative margin case, you would wrap the content below the heading in a div and give it a border-top of the grey line, then put a negative top margin on it to move it up. You would apply a white background to the heading which would cut off the line.
That approach didn’t exactly work b/c when you apply a background color to the heading style it extends across the entire column (not just the width of the text)– effectively covering up the suggested border on a div below it.
Thank you for the suggestion. Much appreciated– any other ideas? :)
Sorry, forgot about that. It wouldn’t be ideal, but to get around it you can do this:
h1 span { background: green; }
<h1><span>Your Text</span></h1>
That did indeed work. Solved (though you’ve said it’s not ideal between the span tags & negative margin).
I’m curious why the negative margin is frowned upon as well as the span tags
oh, and of course– THANK YOU very much for your replies & suggestions!!