电商项目中插入减、热等小图标

电商项目中插入减、热等小图标

<div class="lifeservice" id="lifeservicelist">
      <ul>
         <li>
             <a href="">
                 <i></i>
                 <p>机票</p>
             </a>
             <span>减</span>
         </li>
       </ul>
</div>

本来是想都用伪元素来写，但是还有边框还有一个样式，所以用了span，边框样式用伪元素来做，CSS代码如下：

.lifeservice ul li {
    position: relative;
}
.lifeservice ul li:nth-child(2) span {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 15px;
    line-height: 12px;
    background-color: #589d5a;
    color: white;
}

.lifeservice ul li:nth-child(2) span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 3px 6px;
    border-color: transparent;
    border-bottom-color: #fff;
}

做这个碰到的问题：
border-style: solid;
写完之后没看到底下的三角形边框，F12检查发现border-width那条属性被划掉了，疑惑…去翻了一下之前的笔记，又…又是忘了写border-style…总是忘了这一项，所以干脆记录下来加深印象！