css - :after标记的形状

This question already has an answer here:

Adding an arrow on both sides of a div using CSS? [closed]
                                
                                    （1个答案）
                                
                        
                                5年前关闭。
            
                    
我想知道是否有可能仅使用CSS制作没有html代码的形状。

例：
我有一个菜单：
html

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

对于每个菜单项，我想在其末尾添加一个三角形，而无需在代码中添加其他html标签并使它们与文本对齐。

CSS选择器:after是否可以？

最佳答案

是的你可以。

在这里查看示例。

http://jsfiddle.net/m4fkW/

的HTML

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

的CSS

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

关于css - :after标记的形状，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20356774/