为单词的前 n 个字符添加下划线

我想在链接中的单词的前几个字符下划线，类似于 CSS 第一个字母的工作方式，但字母数量可变。或者，在单词字母的前半部分下划线可能会很有用。有什么方法可以使用 HTML、CSS 或 Javascript 相对简单地完成此操作吗？

（我不是开发人员，我对所有人以及向开发团队传递的任何建议持开放态度；）

<a href="#" class="underline">This is text.</a><br/>
<a href="#" class="underline">More text.</a><br/>
<a href="#" class="">No underline.</a><br/>
<a href="#" class="underline">Underline me.</a><br/>
<a href="#" class="">Nada here though.</a><br/>

a,
a.underline {
    text-decoration: none;
}
.underline span {
    color: green;
    text-decoration: underline;
}

var links = document.links;
var chars = 3;

for (var i = 0, total = links.length; i < total; i++) {
    if (links[i].className.indexOf('underline') > -1) {
        var text = links[i].innerHTML;
        text = '<span>' +
            text.substring(0, chars) +
            '</span>' +
            text.substring(chars);
        links[i].innerHTML = text;
    }
}

http://jsfiddle.net/hMEHB/ http://jsfiddle.net/hMEHB/

EDIT: Words.

var links = document.links;
var chars = 3;

for (var i = 0, total = links.length; i < total; i++) {
    if (links[i].className.indexOf('underline') > -1) {
        var text = links[i].innerHTML.split(' ');
        for (var p = 0, words = text.length; p < words; p++) {   
            text[p] = '<span>' +
                text[p].substring(0, chars) +
                '</span>' +
                text[p].substring(chars);
        }
        links[i].innerHTML = text.join(' ');
    }
}

http://jsfiddle.net/hMEHB/1/ http://jsfiddle.net/hMEHB/1/

EDIT: 作为一个函数。

var links = document.links;
var chars = 2;

for (var i = 0, total = links.length; i < total; i++) {
    if (links[i].className.indexOf('underline') > -1) {
        setUnderline(links[i], chars);
    }
}

function setUnderline(link, chars) {
    var text = link.innerHTML.split(' ');
    for (var p = 0, words = text.length; p < words; p++) {   
        text[p] = '<span>' +
            text[p].substring(0, chars) +
            '</span>' +
            text[p].substring(chars);
    }
    link.innerHTML = text.join(' ');
}

http://jsfiddle.net/hMEHB/2/ http://jsfiddle.net/hMEHB/2/