Placing a small arrow over a letter with css

Answer 1

What you're specifically proposing would have to be done with Javascript, however you could do it with CSS if you used a background image for the arrow.

Something like:

span.vector {
    background: url(arrow.png) no-repeat top;
}

Answer 2

The arrow is a part of the content and belongs in the HTML. You should be able to remove the JavaScript and CSS and the text should still make sense (let's say you decide to print out the page).

You should use the COMBINING RIGHT ARROW ABOVE with the vector letter to represent the full vector glyph.

I propose the following markup:

<var class="vector">v<span>&#8407;</span></var>

For extra nice representation you can then shift the symbol back over the letter with a touch of CSS:

var.vector {
  font-style : normal;
}
var.vector span {
  margin-left: -.55em;   /* shift the arrow back over the letter */
  vertical-align : .2em; /* tune the arrow vertical position */
}

Here is a jsbin example.