列表项目之前的图标,设置不同的背景

时间:2017-12-02 14:08:01

标签: html5 css3

尝试在列表元素之前插入图标。我想为每个设置不同的背景图像。它的工作当我为每个重复代码但我不想重复代码。

   <li class="circle-list"><a href="#">Option 1</a>
   <li class="circle-list"><a href="#">Option 1</a>
   <li class="circle-list"><a href="#">Option 1</a> 

    li.circle-list:before{
    content: "" ;
    display: inline-block;
    background-size: 19px 19px;
    height:19px;
    width:19px;
    margin-right: 10px;
    vertical-align: sub;
    }

     li.circle-list:nth-child(1):before{ 
     background: url('/images/share-1.svg') no-repeat;

     }
     li.circle-list:nth-child(2):before{
     background: url('/images/share.svg') no-repeat;

     }

我的问题:为什么这不起作用,以及如何在不重复代码的情况下更改每个列表项的背景

0 个答案:

没有答案