CSS伪元素巧用

最新推荐文章于 2024-07-28 18:09:15 发布

万少博

最新推荐文章于 2024-07-28 18:09:15 发布

阅读量697

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/wanshaobo888/article/details/107628690

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最新更新时间：2020年07月28日09:28:37

`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`

本文内容：css伪元素有四个：:first-line 伪元素用于向文本的首行设置特殊样式、:first-letter 伪元素用于向文本的首字母设置特殊样式、:before 伪元素可以在元素的内容前面插入新内容、:after 伪元素可以在元素的内容之后插入新内容

:first-line 和 :first-letter 只能用于块级元素
:before 和 :after 的display属性默认是inline
伪元素的content属性可以是：url(url)-设置某种媒体（图像，声音，视频等内容），string-设置Content到你指定的文本

用实体元素的border实现一个三角形

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            display: flex;
            margin: 100px;
        }
        .triangle{
            margin-left: 10px;
            width:0px;
            height:0px;
            border-width: 20px;
            border-style: solid;
        }
        .triangle1{
            border-color:#000;
        }
        .triangle2{
            border-color: transparent #000 #000 #000;
        }
        .triangle3{
            border-color: transparent transparent #000 #000;
        }
        .triangle4{
            border-color: transparent transparent transparent #000;
        }
        .triangle5{
            border-color: #000 transparent transparent transparent;
        }
        .triangle6{
            border-color: transparent #000 transparent transparent;
        }
        .triangle7{
            border-color: transparent transparent #000 transparent;
        }
        .triangle8{
            border-color: #000 transparent #000 transparent;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="triangle triangle1"></div>
    <div class="triangle triangle2"></div>
    <div class="triangle triangle3"></div>
    <div class="triangle triangle4"></div>
    <div class="triangle triangle5"></div>
    <div class="triangle triangle6"></div>
    <div class="triangle triangle7"></div>
    <div class="triangle triangle8"></div>
</div>
</body>
</html>

用实体元素的border实现一个梯形

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            display: flex;
            flex-direction: row;
        }
        .trapezoid{
            margin-left: 10px;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
        }
        .trapezoid-bottom{
            width: 10px;
            border-color: transparent transparent black transparent;
        }
        .trapezoid-right{
            height: 10px;
            border-color: transparent black transparent transparent;
        }
        .trapezoid-top{
            width: 10px;
            border-color: black transparent transparent transparent;
        }
        .trapezoid-left{
            height: 10px;
            border-color: transparent transparent transparent black;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="trapezoid trapezoid-bottom"></div>
    <div class="trapezoid trapezoid-right"></div>
    <div class="trapezoid trapezoid-top"></div>
    <div class="trapezoid trapezoid-left"></div>
</div>
</body>
</html>

用实体元素的border实现一个扇形

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            display: flex;
            flex-direction: row;
        }
        .sector{
            margin-left: 10px;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: black black black black;
            border-radius: 50%;
        }
        .sector-1{
            border-color: transparent transparent black transparent;
        }
        .sector-2{
            border-color: black transparent black transparent;
        }
        .sector-3{
            border-color: transparent transparent black black;
        }
        .sector-4{
            border-color: transparent black black black;
        }
        .sector-5{
            border-color: black black black black;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="sector sector-1"></div>
    <div class="sector sector-2"></div>
    <div class="sector sector-3"></div>
    <div class="sector sector-4"></div>
    <div class="sector sector-5"></div>
</div>
</body>
</html>

实体元素border圆角的不同场景

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            display: flex;
            flex-direction: row;
        }
        .square{
            margin-left: 10px;
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: black;
        }
        .square-1{
            border-radius: 0 50% 50% 50%;
        }
        .square-2{
            border-radius: 50% 0 50% 50%;
        }
        .square-3{
            border-radius: 50% 50% 0 50%;
        }
        .square-4{
            border-radius: 50% 50% 50% 0;
        }
        .square-5{
            border-radius: 0 50% 0 0;
        }
        .square-6{
            border-radius: 50% 50% 0 0;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="square square-1"></div>
    <div class="square square-2"></div>
    <div class="square square-3"></div>
    <div class="square square-4"></div>
    <div class="square square-5"></div>
    <div class="square square-6"></div>
</div>
</body>
</html>

用实体元素绘制滴滴logo的过程

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            display: flex;
            flex-direction: row;
            margin-top: 10px;
        }
        .logo{
            margin-left: 10px;
            width: 20px;
            height: 20px;
            border-radius: 0 0 50% 50%;
            position: relative;
            background-color: #fc9153;
        }
        .inner{
            width: 6px;
            height: 6px;
            border-radius: 0 0 50% 50%;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }
        .block{
            width: 6px;
            height: 6px;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="logo"></div>
    <div class="logo">
        <div class="inner"></div>
    </div>
    <div class="logo">
        <div class="inner"></div>
        <div class="block"></div>
    </div>
</div>
</body>
</html>

用伪元素绘制如下图形

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .logo{
            width: 20px;
            height: 20px;
            border: 1px solid black;
            position: relative;
        }
        .logo:before{
            content: '';
            display: block;
            width: 1px;
            height: 29px;
            background: red;
            transform: rotate(45deg);
            transform-origin: 50% 50%;
            position: absolute;
            top: -5px;
            left: 10px;
        }
        .logo:after{
            content: '';
            display: block;
            width: 1px;
            height: 29px;
            background: red;
            transform: rotate(-45deg);
            transform-origin: 50% 50%;
            position: absolute;
            top: -4px;
            left: 10px;
        }
    </style>
</head>
<body>
<div class="logo"></div>
</body>
</html>

用伪元素的border实现一个三角形

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
            margin: 0;
            padding: 0;
        }
        #box{
            display: flex;
        }
        .pseudo{
            width: 0px;
            height: 0px;
            position: relative;
            margin-left: 30px;
        }
        .pseudo:after{
            content: "";
            position: absolute;
            border-width: 10px;
            border-style: solid;
        }
        .pseudo1:after{
            border-color: transparent transparent transparent #000;
        }
        .pseudo2:after{
            border-color: transparent transparent #000 transparent;
        }
        .pseudo3:after{
            border-color: transparent #000 transparent transparent;
        }
        .pseudo4:after{
            border-color: #000 transparent transparent transparent;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="pseudo pseudo1"></div>
    <div class="pseudo pseudo2"></div>
    <div class="pseudo pseudo3"></div>
    <div class="pseudo pseudo4"></div>
</div>
</body>
</html>

用伪元素实现一个三角形指示器

原理：用伪元素实现三角形，需要用到两个三角形，上层白色三角形覆盖下层黑色三角形，因此需要同时用到:before和:after
效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
            margin: 0;
            padding: 0;
        }
        .pseudo{
            margin: 10px;
            width: 350px;
            line-height: 40px;
            height: 40px;
            position:relative;
            border: 1px #000000 solid;
            text-align: center;
        }
        .pseudo:before, .pseudo:after{
            content:"";
            width:0px;
            height:0px;
            display:block;
            position:absolute;
            top: 50%;
            transform: translateY(-50%);
            border: 10px solid #FFF;
        }
        .pseudo1:before{
            right: -20px;
            border-color: transparent transparent transparent #000000;
        }
        .pseudo2:before{
            right: -18.5px;
            border-color: transparent transparent transparent red;
        }
        .pseudo3:before{
            z-index: 2;
            right: -18.5px;
            border-color: transparent transparent transparent red;
        }
        .pseudo3:after{
            z-index: 1;
            right: -20px;
            border-color: transparent transparent transparent #000000;
        }
        .pseudo4:before{
            z-index: 2;
            right: -18.5px;
            border-color: transparent transparent transparent #ffffff;
        }
        .pseudo4:after{
            z-index: 1;
            right: -20px;
            border-color: transparent transparent transparent #000000;
        }
    </style>
</head>
<body>
<div class="pseudo pseudo1">下层黑色三角形</div>
<div class="pseudo pseudo2">上层白色三角形，用来遮挡下层黑色三角形</div>
<div class="pseudo pseudo3">上下三角形重合覆盖</div>
<div class="pseudo pseudo4">查看详情，请看右边</div>
</body>
</html>

用伪元素实现表单的必填项提示符

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
            margin: 0;
            padding: 0;
        }
        #title{
            font-size: 20px;
        }
        #content{
            display: flex;
            flex-direction: row;
        }
        #left{
            width: 100px;
            text-align: right;
            font-size: 14px;
        }
        label{
            font-size: 12px;
            display: block;
            line-height: 30px;
            height: 30px;
            margin-top: 20px;
            border: 1px solid transparent;
        }
        .redDot:before {
            content: '*';
            color: red;
        }
        input{
            width: 200px;
            line-height: 30px;
            height: 30px;
            margin-top: 20px;
            border: 1px solid #aaaaaa;
            border-radius: 5px;
            padding: 0 10px;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="left">
        <label for="nickname" class="redDot">用户名：</label>
        <label for="passpord" class="redDot">密码：</label>
    </div>
    <div>
        <form action="" id="userInfo">
            <input type="text" id="nickname" value=""><br>
            <input type="password" id="passpord" value=""><br>
        </form>
    </div>
</div>
</body>
</html>

用伪元素实现豁口

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
            margin: 0;
            padding: 0;
        }
        #box{
            margin: 10px;
            width: 100px;
            line-height: 40px;
            height: 40px;
            text-align: center;
            background: #aaaaaa;
            color: #ffffff;
            position: relative;
        }
        #box:before{
            content:"";
            width: 0px;
            height: 0px;
            display: block;
            position:absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            border: 6px solid #FFF;
            border-color: transparent #ffffff transparent transparent;
        }
    </style>
</head>
<body>
<div id="box">右侧豁口</div>
</body>
</html>

用伪元素实现外border

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
            margin: 0;
            padding: 0;
        }
        #circle{
            display: flex;
        }
        .box{
            width: 100px;
            height: 100px;
            line-height: 100px;
            background: #00BFFF;
            border-radius: 50%;
            text-align: center;
            position: relative;
            color:#fff;
            font-size: 26px;
            margin: 20px;
        }
        .box1:before, .box2:before{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border-radius:50%;
            z-index: -1;
        }
        .box1:before{
            width: 120px;
            height:  120px;
            border: 2px solid #f39700;;
        }
        .box2:before{
            width: 100px;
            height:  100px;
            border: 5px solid #f39700;;
        }
    </style>
</head>
<body>
<div id="circle">
    <div class="box box1">2020</div>
    <div class="box box2">2020</div>
</div>
</body>
</html>

伪元素绑定事件

使用pointer-events
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
            margin: 0;
            padding: 0;
        }
        #circle{
            display: flex;
        }
        #confirm{
            width: 10px;
            height: 10px;
            background: #00BFFF;
            pointer-events:none;/* 元素禁止响应鼠标事件 */
        }
        #confirm:before{
            content: '\2716';
            pointer-events: auto;/* 伪元素覆盖父元素的pointer-events:none，响应鼠标事件 */
        }
    </style>
</head>
<body>
<div id="confirm" onclick="sumbit()">sumbit</div>
</body>
<script>
    function sumbit(){
        console.log(1);
    }
</script>
</html>

用伪元素实现消息框

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #message{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background: #aaaaaa;
            margin: 20px;
            position: relative;
        }
        #message:before{
            content:'';
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translate(0px,-50%);
            border: 6px solid #aaaaaa;
            border-color: transparent #aaaaaa transparent transparent
        }
    </style>
</head>
<body>
<div id="message">消息框</div>
</body>
</html>

用伪元素实现hover状态下的border动画

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .hover{
            margin: 20px;
        }
        .hover>li{
            position: relative;
            float: left;
            width: 80px;
            line-height: 40px;
            height: 40px;
            list-style: none;
            text-align: center;
            background: #CC0099;
        }
        .hover>li:before{
            content: "";
            width: 0;/* 动画控制的属性 */
            border-bottom: 4px solid #CCFF00;
            position: absolute;
            left: 50%;/* 0%-动画从左向右 50%-动画从中间向两侧 0%-动画从右向左 */
            bottom: 0;
            transition: all linear .3s;
        }
        .hover>li:hover:before{
            content: "";
            width: 100%;
            border-bottom: 4px solid #CCFF00;
            position: absolute;
            left: 0;/* 底部border静态从左向右 */
            bottom: 0;
        }
    </style>
</head>
<body>
<ul class="hover">
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>
</body>
</html>

用伪元素清除浮动

场景一：上元素中的所有子元素左浮动，导致上元素高度塌陷，下元素浮动有上元素右侧

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	.float{
            float: left;
            background: #CCFF00;
        }
        #bottom{
            background: #CC0099;
        }
    </style>
</head>
<body>
<div id="top">
    <div class="float">子元素1</div>
    <div class="float">子元素2</div>
    <div class="float">子元素3</div>
</div>
<div id="bottom">上元素中的子元素浮动，导致上元素高度塌陷</div>
</body>
</html>

清除浮动
上元素添加伪元素，清除自身浮动属性

#top:after{
    content: "";
    display: block;
    clear: left;
}

场景二：纵向布局排列四个元素，中间两个元素左浮动，导致第四个元素素浮动到第三个元素右侧

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	.float{
            float: left;
            background: #CCFF00;
        }
        #bottom{
            background: #CC0099;
        }
    </style>
</head>
<body>
<div id="fl" class="static">静态元素1</div>
<div class="float">浮动元素1</div>
<div class="float">浮动元素2</div>
<div id="fr" class="static">静态元素2</div>
</body>
</html>

不用伪元素清除浮动
第四个元素清除第三个元素浮动

#fr:before{
    content: '';
    display: block;
    clear: left;
}

用一个元素借住伪元素实现太极图

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #taiji{
            width:0;
            height:300px;
            position:relative;
            /*margin: 50px auto;*/
            border-left:150px solid #000;
            border-right:150px solid #fff;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
            border-radius: 300px;
        }
        #taiji:after{
            width:150px;
            height:150px;
            position:absolute;
            content: '';
            display: block;
            top:0;
            left:-75px;
            z-index: 1;
            background-color: #fff;
            border-radius:50%;
            box-shadow:0 150px 0 #000;
        }
        #taiji:before {
            content:'';
            position:absolute;
            display: block;
            width:75px;
            height:75px;
            top:38px;
            left:-38px;
            z-index:2;
            background-color: #000;
            border-radius: 50%;
            box-shadow: 0 150px 0 #fff;
        }
    </style>
</head>
<body>
<div id="taiji"></div>
</body>
</html>

用伪元素实现波浪线、加点字、箭头

效果如图所示
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*波浪线*/
        .uwave {
            position: relative;
        }
        .uwave:before {
            content: '';
            position: absolute;
            bottom: -1px;
            width: 100%;
            height: 3px;
            background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #000000, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #000000, transparent 55%, transparent 100%);
            background: linear-gradient(135deg, transparent, transparent 45%, #000000, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #000000, transparent 55%, transparent 100%);
            background-size: 6px 6px;
            background-repeat: repeat-x, repeat-x;
        }
        /*加点字*/
        .dotuline{
            position: relative;
        }
        .dotuline:after {
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #000;
            bottom: -4px;
            left: 50%;
            transform: translate(0,-50%);
            /*margin: auto;*/
            margin-left: -2px;
        }
        /*向左箭头*/
        .left-bracket {
            margin-left: 8px;
            position: relative;
        }
        .left-bracket:before {
            position: absolute;
            content: "";
            margin: auto;
            top: 0;
            bottom: 0;
            left: -8px;
            width: 0;
            height: 0;
            border-right: 6px solid black;
            border-bottom: 6px solid transparent;
            border-top: 6px solid transparent;
        }
        .left-bracket:after {
            position: absolute;
            content: "";
            margin: auto;
            top: 0;
            bottom: 0;
            left: -5px;
            width: 0;
            height: 0;
            border-right: 6px solid white;
            border-bottom: 6px solid transparent;
            border-top: 6px solid transparent;
        }
        /*向右箭头*/
        .right-bracket {
            margin-right: 8px;
            position: relative;
        }
        .right-bracket:after {
            position: absolute;
            content: "";
            margin: auto;
            top: 0;
            bottom: 0;
            right: -5px;
            width: 0;
            height: 0;
            border-left: 6px solid #ffffff;
            border-bottom: 6px solid transparent;
            border-top: 6px solid transparent;
        }
        .right-bracket:before {
            position: absolute;
            content: "";
            margin: auto;
            top: 0;
            bottom: 0;
            right: -8px;
            width: 0;
            height: 0;
            border-left: 6px solid #000000;
            border-bottom: 6px solid transparent;
            border-top: 6px solid transparent;
        }
    </style>
</head>
<body>
<div>请解释这句话中有<span class="uwave">波浪线</span>的内容</div>
<div>请解释这句话中有<span class="dotuline">加</span><span class="dotuline">点</span><span class="dotuline">字</span>的内容</div>
<div>请注意这句话中向左的<span class="left-bracket">箭</span><span class="left-bracket">头</span>的内容</div>
<div>请注意这句话中向右的<span class="right-bracket">箭</span><span class="right-bracket">头</span>的内容</div>
</body>
</html>