CSS 3.0中伪元素after和before的妙用
CSS 3.0中伪元素after和before的妙用
越陌度阡
发布于 2020-11-26 11:21:18
发布于 2020-11-26 11:21:18
我们常用CSS 3.0中的伪元素来修饰一些细节，让页面看起来效果更好，比如下面这个图片中的面包屑导航中的符号，还有任务清单前的序列符号，都是用伪元素实现的。
以下是代码实现，希望能对初学者有一个简单的认识。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 3.0中伪元素after和before的妙用 </title>
<style>
/* 面包屑导航 */
.breadcrumb {
font-size: 1.6rem;
color: #fff;
}
.breadcrumb a{
color:red
}
.breadcrumb a:first-child {
color: #82fcfd;
}
.breadcrumb a:first-child::before {
content: " » ";
}
.breadcrumb a::after {
content: " /";
color: #ef6eae;
}
.breadcrumb a:last-child::after {
content: "";
}
/* 任务清单 */
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 {
/* 符号来源于http://m.fhdq.net/ */
content: "☐ ";
color: aqua;
}
li.completed::before {
/* 符号来源于http://m.fhdq.net/ */
content: "✔ ";
text-decoration: none;
color: greenyellow;
}
li.completed {
text-decoration: line-through;
color: #bdbdbd;
}
</style>
</head>
<body>
<div class="breadcrumb">
<a>编程</a>
<a>前端</a>
<a>框架</a>
</div>
<main>
<div>
<h2>未学习</h2>
<ul>
<li>VUE</li>
<li>REACT</li>
<li>ANGULAR</li>
</ul>
</div>
<div>
<h2>已学习</h2>
<ul>
<li class="completed">KOA</li>
<li class="completed">EGG</li>
<li class="completed">EXPRESS</li>
</ul>
</div>
</main>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读