li小三角装饰

xiaoniba • • XHTML/CSS 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            /*width:270px;*/
            /*overflow: hidden;*/
        }

        ul li{
            color: #333;
            list-style: none;
            width: 260px;
            overflow:hidden;
            height: 1.7em;
            box-sizing: border-box;
            white-space: nowrap;
            text-overflow: ellipsis;

        }
        ul li:hover{
            /*background: chartreuse;*/
            border-bottom:1px dashed green;
            box-sizing: border-box;
            margin-left: -6.7px;
            cursor: pointer;
        }
        ul li:hover::before{
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            border: 7px solid transparent;
            border-left-color: green;
            margin-right: -7px;
            /*margin-left: -7px;*/

        }


    </style>
</head>
<body>
<ul>
    <li>小泥吧科技 靠譜的IT伙伴Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>中華人民共和國中華人民共和國中華人民共和國中華人民共和國</li>
    <li>Doloremque eius, laborum minima perspiciatis quae totam ullam!</li>
    <li>A animi quasi reiciendis, similique sit tenetur vel.</li>
    <li>Amet expedita maxime tenetur. Molestiae natus voluptas voluptate.</li>
    <li>Eveniet libero numquam pariatur rem similique totam. Saepe.</li>
    <li>Autem expedita fugiat illum itaque nostrum pariatur velit.</li>
    <li>Amet incidunt, nam necessitatibus quia reprehenderit velit voluptas.</li>
    <li>Aspernatur cumque enim et itaque maiores molestias tenetur.</li>
    <li>Cupiditate enim eos esse expedita ipsa maiores quo.</li>
</ul>
<div></div>
<i></i>
</body>
</html>

 

版权声明：
作者：xiaoniba
链接：https://blog.xiaoniba.com/2023/12/28/li%e5%b0%8f%e4%b8%89%e8%a7%92%e8%a3%85%e9%a5%b0/
来源：小泥吧的博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>