gringogordo gringogordo - 2 years ago 69
HTML Question

Style underline on a date with superscript

I have a line of html with inline css like this

<h2 style="text-decoration: underline;font-weight: bold;" >22<sup>nd</sup> of May 2017</h2>

There may be comments about this text format but this is not really the question (this is the way the requirement is written and although I'm sure I can get it changed if needs be I'm trying to do the initial page to the spec).

The above (in Chrome at any rate) moves breaks the underline and moves a mini underline section up to the superscript, which looks a bit silly to me. I would rather just have one solid underline underneath the whole date ? Ideally using inline script for now but if it requires a more sophisticated answer then so be it!

Thanks in advance if anyone can answer...

Answer Source

Instead of using a text decoration use a bottom border:

<h2 style="border-bottom: 1px solid #000;font-weight: bold;" >22<sup>nd</sup> of May 2017</h2>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download