1. 文章
  2. 前端
  3. 文章详情

使用:before伟类实现自定义li标签前面的图标

发布于5年前(2019-07-26) 分类：前端  阅读(7.9k)  评论次数(0)
HTML提供了两种类型的列表，顺序列表(ol)和无序列表(ul)。这两种标签默认情况下都会在列表项开头显示数字或者图标，用于使得列表项看起来更有序。但是默认提供的图标过于单调平淡，有时候并不能满足我们的需求，我们需要美化或者替换原始的图标。如何实现呢，本文使用CSS伪类实现了定制化列表项图标，示例如下：

CSS代码如下：

 body {
  font-size: 0.8em;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 50px;
}

.custom-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.custom-list li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}

.custom-list li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  font-weight:bolder;
  background-color: #5cb85c;
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

.image-list li::before{
     font-size: 70%;
     color:#000;
     background-color:transparent;
     background-size:cover;
     background-image:url(https://axxys.wpengine.com/wp-content/uploads/2016/03/Cloud.png);
     padding-top: 7px;
     padding-left: 13px;
}

HTML代码

<h3>背景色图标示例</h3>
<ol class="custom-list">
  <li>人活着真累...</li>
  <li>当你决定孤军奋战对抗世界的时候...</li>
  <li>你得到了你要的那个结果也不代表你赢了...</li>
  <li>你能证明全世界都错了，但你对了,那就去吧...</li>
  <li>人生不设限...</li>
</ol>
<br/>
<h3>图片图标示例</h3>
<ul class="custom-list image-list">
  <li>人活着真累...</li>
  <li>当你决定孤军奋战对抗世界的时候...</li>
  <li>你得到了你要的那个结果也不代表你赢了...</li>
  <li>你能证明全世界都错了，但你对了,那就去吧...</li>
  <li>人生不设限...</li>
</ul>

效果截图如下：
before伪类实现自定义li标签图标

the end

标签： 伪类 html
上一篇:   使用CSS解决移动端safari浏览器中单词被切断并显示中划线问题
下一篇:   JavaScript文件中使用"use strict"声明和不使用的区别
热门文章