怎么自定义列表符号? - css笔记

ul,li的无序列表有默认的符号·,但是在很多情况下我们希望可以给这个符号加入自己的样式和颜色,甚至是换成自定义的符号

ulli的无序列表有默认的符号·,但是在很多情况下我们希望可以给这个符号加入自己的样式和颜色,甚至是换成自定义的符号。默认的符号我们是无法做任何的样式处理,而且默认的符号在CSS属性里面只有几个选择可以使用,很多情况下都是无法满足我们的设计。

其实自定义无序列表符号不难,我们只需要使用伪元素::beforecontent属性就可以实现。

在我这个例子里面我做了两个任务列表,一个是待处理任务,一个是已完成任务,各自给了不一样的列表符号和颜色。

怎么自定义列表符号? - css笔记-Npcink

实现原理

一、首先我们禁用了ul的默认符号样式list-style: none

二、在li:before伪元素上给予content内容值,待处理任务使用,已完成任务li.completed:before使用

三、为了展示效果更加好看我分别给了lili .completed两个不同的颜色

上代码看看是怎么实现的吧:

HTML

<div>
  <h2>待处理</h2>
  <ul>
    <li>待办任务1</li>
    <li>待办任务2</li>
    <li>待办任务3</li>
    <li>待办任务4</li>
    <li>待办任务5</li>
  </ul>
</div>
<div>
  <h2>已完成</h2>
  <ul>
    <li class="completed">完成任务1</li>
    <li class="completed">完成任务2</li>
    <li class="completed">完成任务3</li>
  </ul>
</div>

CSS

ul {
  list-style: none;
  color: #fff;
  font-size: 20px;
  border: 3px solid #000;
  padding: 1rem 2rem;
  min-height: 200px;
  margin: 15px 2rem 0 0;
  background: #323232;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  border-radius: 8px;
}

li {
  padding: 0.3rem 0;
}

li::before {
  content: "  ";
  color: aqua;
}

li.completed::before {
  content: "✔ ";
  text-decoration: none;
  color: greenyellow;
}

li.completed {
  text-decoration: line-through;
  color: #bdbdbd;
}

::before::after伪元素加content属性可以用来做很多特殊的效果,也是当代前端排版比较常用的“魔法”。说到伪元素的使用,我再给大家说一个比较常用的使用场景。

在管理后台或者是文章展示中,我们经常可以见到的“面包屑导航”也是用伪元素来插入每个目录中间的符号的。

怎么自定义列表符号? - css笔记-Npcink

实现逻辑

一、这个导航含有3个a标签,首先给每个a标签加入一个伪元素::after,然后在content属性插入/符号。

二、然后使用a:first-child,这个伪类会选择到第一个a标签,然后使用content属性加入»符号。

三、因为我们第一步在每个a标签的后面插入了/符号, 所以我们需要在最后一个a标签清除掉。这里我们使用:last-child选择到最后一个a标签,然后用content: " "属性把伪元素的内容清楚掉。

HTML

<div class="breadcrumb">
  <a>三钻</a>
  <a>前端</a>
  <a>教程</a>
</div>

CSS

.breadcrumb {
  font-size: 1.6rem;
  color: #fff;
}
.breadcrumb a:first-child {
  color: #82fcfd;
}
.breadcrumb a:first-child::before {
  content: " » ";
}
.breadcrumb a::after {
  content: " /";
  color: #ef6eae;
}
.breadcrumb a:last-child::after {
  content: "";
}

知识总结

  • ::before | ::after — 伪元素用于向某些选择器添加特殊的效果。
  • content — CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。
  • :first-child — CSS伪类表示在一组兄弟元素中的第一个元素。
  • :last-child — CSS伪类代表父元素的最后一个子元素。

当然,li元素自带了一些可自定义的符号,可通过<ol type="a">的例子进行调用,当然,不赞成使用。请使用样式取代它。

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
css

怎么使用纯css制作裁剪图像动画? - css笔记

2020-5-30 12:28:43

css

HTML CSS整理笔记 - 前端基础知识点汇总

2020-5-31 22:06:35

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索