Css 带焦点的菜单添加文本

我想做一个非常小的菜单，所以我有每个名字的首字母，我加上“焦点”，但我希望它显示的是完整的单词。 例：

---

谢谢

我为你创作了小提琴你想要这样的吗

<nav>
<li class="menu">
    <a href="home.php">
        <span class="test">h</span><span class="test2">ome</span>
    </a>
</li>
<li class="menu">
    <a href="home.php">
        <span class="test">g</span><span class="test2">alery</span>
    </a>
</li>

或者，如果您想要javascript解决方案，这里是u的代码

html

Jquery

$(".nav>li>a").click(function(e) {
    var trig = false;
    var links = $(this).data("url");
    $(this).children(".test2").addClass("open");
    if(trig == false){
        $(this).click(function(e) {
            window.location.href = links;
        });

    }

});

---

这是一个非常特殊的问题，我已经在搜索了，但我相信这里的人可以很容易地给我一些启发好吧，太棒了。。谢谢，所以在php中我不能做你用java脚本做的事情？我不确定，但我想你肯定不能检查phpit中的点击事件已经对过程起到了推动作用，也许我还需要学习javascript。谢谢，请接受这个问题，因为它对我很有帮助，我将不胜感激（y）

    css:

    nav li:focus .f {
        display: inline;
        background-color: #202020;
    }

    nav li: hover .m {
        display: none;
    }

<nav>
<li class="menu">
    <a href="home.php">
        <span class="test">h</span><span class="test2">ome</span>
    </a>
</li>
<li class="menu">
    <a href="home.php">
        <span class="test">g</span><span class="test2">alery</span>
    </a>
</li>

nav li a .test2{display:none} 
nav li a:focus .test2, nav li a:hover .test2{display:inline}

<nav class="nav">
<li class="menu">
    <a href="javascript:;" data-url="home.php">
        <span class="test">h</span><span class="test2">ome</span>
    </a>
</li>
<li class="menu">
    <a href="javascript:;" data-url="gallary.php">
        <span class="test">g</span><span class="test2">alery</span>
    </a>
</li>

nav li.menu a .test2{display:none;}
nav li.menu a .test2.open{display:inline;}

$(".nav>li>a").click(function(e) {
    var trig = false;
    var links = $(this).data("url");
    $(this).children(".test2").addClass("open");
    if(trig == false){
        $(this).click(function(e) {
            window.location.href = links;
        });

    }

});