和谐的小三角裤

南瓜小米粥 发表于 前端开发 分类,标签: css 列表 项目符号

列表项前的项目符号,我们通常都是做成图片的,这样比较方便控制。不用图片可不可以呢?当且仅当列表图片为方形、三角形的时候还是有一定可行性的, 比如这样:

css:

ul {
    position:relative;
    margin:10px auto;
    padding:10px;
    width:230px;
    border:1px solid #DDD;
    font-size:12px;
    overflow:hidden;
}
li {
    position:relative;
    clear:both;
    float:left;
    width:220px;
    margin:0.75em 0;
    width:0;
    height:3px;
    border-left:3px double #333;
}
ul li:after {
    content:"";
    display:block;
    clear:both;
    height:0;
    zoom:1;
    visibility:hidden;
}
li a {
    position:absolute;
    top:-0.65em;
    margin-left:10px;
    white-space:nowrap;
}

阅读全文>>