I would like to have my topic headings in static pages to always have a half horizontal rule immediately beneath them, like an underline that extends half way across the content area. The page title has a similar hr but it extends all the way across. This works perfectly for me:
<h2>My H2 Text<div style="font-size: 1%;">
<hr align="LEFT" width="50%" />
</div>
</h2>
The problem is that the visual editor, if someone else (who doesn't like working with HTML) edits the page at all, modifies this part to
<h2>My H2 Text</h2>
<div style="font-size: 1%;">
<hr align="LEFT" width="50%" />
</div>
which moves the hr a full line below my topic heading text, which looks
weird.
Is there a way to modify a style page so h2, h3, etc, always have this
half horizontal rule in tight below them? Or make a variant of these heading tags that has this line? Or a way to keep the visual
editor from shuffling my HTML?
Thanks for any hints!