Css 带有：after标记的形状

我想知道是否有可能使形状没有html代码，只有css

例如： 我有菜单： html

项目1
项目2
项目3
项目4

对于每个菜单项，我希望在其末尾添加一个三角形，而不向代码中添加其他html标记，并将它们与文本对齐

---

CSS选择器

：在
之后是否可以执行此操作？
使用以下代码：

ul li:after{url('Traingle url goes here')}

这在纯CSS中是可能的

请查看完整的形状列表

但三角形在这里：

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

网站上还有更多信息。
是的，你可以

这里有一个例子


HTML

要使三角形与文本和
：在
选择器之后对齐，这是解决方案

（让我走上正确的道路）

HTML:

检查
您试过了吗？我很确定这是可能的。看看这个，等等。我想寻找的是，有没有可能将三角形与文本对齐？我可以制作形状，我想知道的是，是否有可能将它们添加到：在选择项之后，只需使用
：after
并确保使用
内容：“”；'@chadocatthx但我更喜欢在这里添加一个css形状，没有图像与Tiago相同，我更喜欢只添加css而没有图像
#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

li:after{
    content:" ";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid red;
}

li:after { content: url(img.jpg); }

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

li{
    position:relative;
}
li:after{
    content:" ";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid red;
    position:absolute;
    top:5px;
    margin-left:10px;
}