专栏首页大前端(横向跨端 & 纵向全栈)CSS 3.0中伪元素after和before的妙用

CSS 3.0中伪元素after和before的妙用

我们常用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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 原生JS实现腾讯视频轮播图

    越陌度阡
  • CSS 3.0实现创意菜单导航条

    越陌度阡
  • 原生JS实现百叶窗特效

    越陌度阡
  • django-模板之include标签(十五)

    绝命生
  • jquery链式调用 - 层级菜单示例

    jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

    Devops海洋的渔夫
  • 获取元素

    例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,再对其进行操作。

    星辰_大海
  • 仿qq空间好友动态刷新

    在qq空间里有好多网页特效值得初学html和js的去学习,今天我来介绍一种特效。我们在上qq空间是都会发现,当向下滚动鼠标,使滚动条到达最低端的时候,好友动态会...

    无邪Z
  • jQuery第二十九篇 事件委托

    用户7873631
  • 点击a页面链接跳转b页面某个tab切换的实现

    解释一下,首先有一行 .tab 是 tab按钮, .inner 是对应的三个 li 默认隐藏,第几个 tab 选中就对应的显示第几个 li 。 

    德顺
  • 符合标准的有序列表分页源码示例

    一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

    练小习

扫码关注云+社区

领取腾讯云代金券