Html 如何制作一个在每个条目右侧带有箭头的垂直CSS菜单？

很长一段时间以来，我一直在努力让它发挥作用，但我完全被难倒了。网上有很多关于如何制作基本CSS列表菜单的文章，但我想制作一个如下的：

Line 1          >>
Line 2          >>
Line 3          >>

其中每一行都是一个链接，包括文本、空格和箭头

我已经尝试了我能想到的一切，但没有任何效果。如果你知道自己在做什么，我相信这很简单，有人能帮我吗

以下是我目前拥有的：

<style type="text/css">
    ul.menu {
        padding: 0;
        margin: 0;
        font-size: 16px;
    }

    ul.menu > li {
        display: block;
        width: 100%;
    }

    ul.menu > li:hover {
        color: red;
    }

    ul.menu > li a {
        display: block;
        width: 100%;
    }

    ul.menu > li > a:hover {
        background-color: #F7F7F7;
    }
</style>

<ul class="menu">
    <li>
        <a href="">Line 1</a>
    </li>
    <li>
        <a href="">Line 2</a>
    </li>
    <li>
        <a href="">Line 3</a>
    </li>
    <li>
    <a href="">Line 4</a>
    </li>
</ul>

---

最快的方法是在li或a上设置背景图像，具体取决于您的设计需要：

background:transparent url("http://placehold.it/25x25") right center no-repeat;

---

最快的方法是在li或a上设置背景图像，具体取决于您的设计需要：

background:transparent url("http://placehold.it/25x25") right center no-repeat;

您可以使用css:after属性来实现这一点

演示

CSS 您可以使用css:after属性来实现这一点

演示

CSS