Is there a way in HTML and/or CSS to do the following, but then correctly:

√¯¯¯¯¯¯φ·(2π−γ)

Such that there is an overbar above the expression, which neatly aligns with the √?

I know there is the Unicode ¯, that looks like the overbar I need (as used in the above example, though as you can see – it doesn't align well with the root symbol).

The solution I'm looking for works at least for one standard font, on most sizes, and all modern browsers. I can't use images; I'd like to have a pure HTML4/CSS way, without client scripting.

Here is my current code, thank you Matthew Jones ⁽⁺¹⁾ for the text-decoration: overline! Still some problems

<div style="font-family: Georgia; font-size: 200%">
    <span style="vertical-align: -15%;">&radic;</span><span style="text-decoration: overline;">&nbsp;x&nbsp;+&nbsp;1&nbsp;</span>
</div>

• The line doesn't match the √ because I lowered it with 15% baseline height. (Because the default placement is not nice)
• The line thickness doesn't match the thickness of the √.

Thanks!