Placing a small arrow above the letter css

Question

I am trying to use html and css to represent simple vector notation on a web page. A vector is simply indicated by an arrow with the right pointer above the letter. Example like image: vector

The problem is that I could use this notation in more than a few dozen different letters or characters, and I do not want to stop everything and make another image every time I need one. I want to introduce this using text, if at all possible.

During the search, I came across some HTML notation (?) For the pretty arrow with the right pointer (→). So, what I would like to do is come up with some css which, for a letter enclosed in a specific span class, inserts this arrow and positions it above the contents of the range.

For example:

<span class="vector">v</span>

will be displayed as the image linked above.

Is this possible with pure css? Do I have to resort to javascript?

thanks

Answer 1

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

, .

:

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

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 */
}

jsbin.

Answer 2

, , Javascript, CSS, .

- :

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