程序员经验分享-hwhale

伪元素::after和::before的”前世今生“

2023-11-03

序言

在做前端页面时，需要做一些样式上的改变，使用伪元素很轻易就做到了。之前一直说伪元素还可以清除浮动，然后就想了解一下这东西到底能干什么。如下图，之前碰到的，为元素添加边框样式，小程序中修改radio,checkbox的默认样式，都用到了伪元素。
在这里插入图片描述在这里插入图片描述在这里插入图片描述
接下来，我们详细了解一下css中的伪元素

伪元素

css3为了区分伪类和伪类元素，伪元素采用了双冒号的写法。
常见伪类::hover，:link，:active，:target，:not()，:focus
常见为元素:::first-letter，::first-line，::after，::before，::selection

这里顺便说一下 :before,:after 与::before,::after的区别
不同点：

  • :before/:after是css2的写法，::before/::after是css3的写法，本质写法还是一样
  • :before/:after的兼容性要比::before/::after好，所有支持::的浏览器都会支持:，但IE8只支持单冒号，一般开发的话还是使用双冒号即可
    相同点：
  • 都可以用作伪元素，用来设置对象前或后的内容
    注意：
  • 必须配合content属性一起使用
  • 这些元素不会出现在DOM中，所以无法通过js操作，仅仅是css渲染层加入
1.概念理解

伪元素之所以被称为为元素，是因为他们不是真正的元素，他们不会出现在DOM中，主要用于为当前元素增加修饰性的内弄，显示的内容是content，默认是行内元素，如果没有设置content，伪元素是不起作用的，可以为其设置css样式
伪元素几个必要的参数：

  • content：字符串：作为内容添加在主元素的前和后
  • attr(attr_name)：伪元素跟某个属性值进行关联，伪类元素的内容就是指定属性的值
  • url()/uri()：引用外部资源，例如图片
  • counter：调用计数器，可以不适用列表元素实现序号问题。、

counter使用案列:本质就是在使用该计数器前必须先设置好计数器名称

1.使用counter-reset:name
2.使用counter-increment累加
在这里插入图片描述

2.::before，::after特点

上面说过伪元素是通过样式达到效果，为元素并不会在DOM中，所以总结其特点：

  • 伪元素不在DOM中，所以js无法操作它
  • 伪元素属于主元素一部分，因此点击它触发的也是主元素的click事件
  • 块级元素，行内元素，行内块级元素都可以设置::brfore，::after，但是因为行内块元素可替换元素，例如：img标签，以为其外观和尺寸都是由外部资源决定的，当外部资源加载正确，就会替换其内部内容，伪元素内容就会被替换掉，但当加载失败时，伪元素可以发挥一些效果。
    总结一下伪元素的优缺点：
    1.优点
  • 解决一些问题可以无需增加DOM节点就可以解决
  • 可以让css解决部分js问题
    2.缺点
  • 不利于SEO
  • 无法审查元素，调试样式比较困难

伪元素的使用场景

1.清除浮动

这个在我对浮动的博客已经有详细解释了，这里就自己简单介绍伪元素清除浮动。
清除浮动本质解决的是子元素浮动后，父元素高度为零的现象。其中一个解决方法是在子元素后添加一个空的div设置clear:both，这样可以解决，但是却添加了DOM树复杂程度，因此使用伪元素，就两两全其美了。
使用伪类元素是清除浮动的正常方法
在这里插入图片描述
如上图，清除浮动前后对比，效果明显。
对清除浮动有兴趣的请移步css之浮动（图文并茂）详细了解

2.改变某些元素的默认样式

例如：img图片失效时默认样式如下
在这里插入图片描述
我们可以使用伪元素修改默认的样式
在这里插入图片描述
代码：

 		img::before{
            content: '\21BB' "Broken of the Image";
            display: block;
            width: 100%;
            height: 100px;
            background-color:lightgray;
            position: absolute;
        }
        img{
            content: '';
            display: block;
            font-size: 16px;
            position: absolute;
            width: 100%;
            text-align: center;
        }

控件原样式
在这里插入图片描述
修改后
在这里插入图片描述
代码

		/*调小控件大小*/
		radio .wx-radio-input{
		  width: 33rpx;
		  height: 33rpx;
		  border-radius: 50%;
		}
		/*使用伪元素添加中间圆点*/
		radio .wx-radio-input.wx-radio-input-checked::before{
		   border-radius: 50%;
		   width: 25rpx; 
		   height: 25rpx; /*宽高要比控件小一点*/
		   text-align: center;
		   font-size:0rpx; /*去除中间对号*/
		   background-color: #F69401; 
		}
		/*点中后边框*/
		 radio .wx-radio-input.wx-radio-input-checked{
		  background: #fff !important;
		  width: 30rpx;
		  height: 30rpx;
		  border: 3rpx solid #F69401 !important;
		}
3.特效

在一些a标签链接中常会见到这些特效
在这里插入图片描述
这种特效就是通过伪元素写出来的，代码如下：

		a{
            display: block;
            outline: none;
            text-decoration: none;
            color: #000;
            font-size: 32px;
            text-align: center;
        }
        a:before { 
            content: "\5B";
            display: inline-block;
            transform: translateX(0);
            visibility: hidden;
            transition: transform 0.3s;
         }
        a:hover::before { 
            visibility: visible;
            transform: translateX(-20px);
         }
         
         a::after { 
            content: "\5D";
            display: inline-block;
            transform: translateX(0);
            visibility: hidden;
            transition: transform 0.3s;
         }
        a:hover::after { 
            visibility: visible;
            transform: translateX(20px);
         }
4.webfont的图标

现在webfont图标的最佳实践就是使用i标签和::after或者::before，实现这种图标最佳实践的工具非常多，比如http://fontello.com/，从这个网站我们可以下载svg的图标库。这里引用before和after的用法
比如电话图标
在这里插入图片描述

<style type="text/css">
    #phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-		transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
    #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
    #phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
</style>
<div id="wraper">
    <div id="phone"></div>
</div>

更多图标：

<!doctype html>
<html>
<head>
    <title>伪类标签使用</title>
</head>
<style type="text/css">
    #wraper{padding:10px;width:380px;height:380px;border:3px solid #ccc;margin:auto;}
    #power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}
    #power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}
    #play{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;}
    #pause{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #pause:before{height:20px;width:5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;}
    #stop{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #stop:before{height:17px;width:17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;}
    #comment{width: 50px;height: 25px;margin:20px;border: 6px solid #EEB422;border-radius: 20%;position:relative;display: inline-block;background: #EEB422;}
    #comment:before{border:10px solid transparent;border-top:10px solid #EEB422;content: "";position: absolute;left:28px;top: 28px;}
    #comment:after{content: "....";position: absolute;color: #fff;font-size: 26px;top: -10px;left: 2px;}
    #like{width: 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;}
    #like:before{width:50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;}
    #search{width: 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;}
    #search:before{width:20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;}
    #home{width: 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #home:before{width:6px;height:12px;background:#fff;content: "";position: absolute;left:12px;top: 20px;}
    #home:after{border:25px solid transparent;border-bottom:20px solid #EEB422;content: "";position: absolute;top: -38px;left:-10px;}
    #photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #photo:before{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;}
    #photo:after{width:15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;}
    #photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #email{width:50px;height:35px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #email:before{border:25px solid transparent;border-top:20px solid #fff;content: "";position: absolute;left:0px;top: 2px;}
    #email:after{border:25px solid transparent;border-top:20px solid #EEB422;content: "";position: absolute;top:0px;}
    #file{width:30px;height:45px;border:4px solid #EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #file:before{border:10px solid #fff;border-right:10px solid #EEB422;border-bottom:10px solid #EEB422;content: "";position: absolute;left:-4px;top: -4px;}
    #file:after{width:20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;}
    #history{width:35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;}
    #history:before{width:14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;}
    #video{width:50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;}
    #video:before{width:6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;}
    #video:after{width:10px;height:10px;border:6px solid transparent;border-top:6px solid #EEB422;border-left:6px solid #EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:13px;top: 35px;}
    #tags{width:50px;height:25px;background:#EEB422;border-radius: 35% 0% 0% 35%;transform:rotate(45deg);-webkit-transform:rotate(45deg);margin:20px;margin-left:35px;position:relative;display: inline-block;top: -5px;}
    #tags:before{width:10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;}
    #phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
    #phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
    #phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
    #profile{width: 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;}
    #profile:before{width: 20px;height:22px;background:#EEB422;border-radius:40%;content: "";position: absolute;left: 10px;top: -22px;}
</style>
<body>
    <div id="wraper">
        <div id="power"></div>
        <div id="play"></div>
        <div id="pause"></div>
        <div id="stop"></div>
        <div id="comment"></div>
        <div id="like"></div>
        <div id="search"></div>
        <div id="home"></div>
        <div id="photo"></div>
        <div id="email"></div>
        <div id="file"></div>
        <div id="history"></div>
        <div id="video"></div>
        <div id="tags"></div>
        <div id="phone"></div>
        <div id="profile"></div>
    </div>
</body>
</html>

在这里插入图片描述
伪元素还有很多有趣的地方，希望这些对你们有帮助！！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

伪元素::after和::before的”前世今生“ 的相关文章

随机推荐

  • stl_func STT_FILE

    http lxr free electrons com source tools perf util symbol elf c L810 http lxr free electrons com source tools perf util

  • 公众号+视频号+个人号的闭环运营将非常重要

    2020年10月9日 抖音直播正式切断和第三方平台的合作 开始打造自己的封闭生态系统 与此同时 微信团队在这一时间段内 开始不同寻常的快速迭代视频号 并且逐步放开微信生态内的所有权限 包括流量采买 视频号加热 直播间 朋友圈曝光 订阅号里的

  • android使用工具性能优化

    简介 本文记录使用工具来对app进行优化过程 主要包括UI界面优化 内存优化 代码优化以及电量优化 各个优化模块是相互关联的 各个模块优化后才能达到app整体的性能提升 UI界面优化 界面优化方面主要是减少GPU过渡绘制 也就是同一个像素点

  • LSTM Character-Aware Language Model

    DeepDGA中提到的自编码器 在字符级语言建模中非常有用 DeepDGA中 作者用该自编码器与生成对抗网络的效果作了对比 项目地址 https github com yoonkim lstm char cnn 代码来自 AAAI 2016

  • CentOS7.5.1804 Minimal 安装JDK1.8.0_172

    一 安装前检查 安装之前先检查一下系统有没有自带open jdk 命令 rpm qa grep java rpm qa grep jdk rpm qa grep gcj 如果没有输出信息表示没有安装 如果有输出信息 表示安装了 检查是否是自

  • C语言中动态内存的申请和释放

    什么是动态内存的申请和释放 当程序运行到需要一个动态分配的变量时 必须向系统申请取得堆中的一块所需大小的存储空间 用于存储该变量 当不再使用该变量时 也就是它的生命结束时 要显式释放它所占用的存储空间 这样系统就能对该堆空间进行再次分配 做

  • 用R语言如何进行贝叶斯网状meta的meta回归分析

    R语言通过许多不同的软件包来实现贝叶斯网状meta回归分析 其中一个常用的软件包是 rstanarm 你可以使用该软件包中的函数 stan glmer 来拟合模型 并使用 summary 函数来获取结果的统计信息 此外 你还可以使用 plo

  • 时间序列预测算法总结

    时间序列算法 time series data mining 主要包括decompose 分析数据的各个成分 例如趋势 周期性 prediction 预测未来的值 classification 对有序数据序列的feature提取与分类 cl

  • 【Python】Bezier曲线的绘制

    Bezier曲线的绘制 r u i J

  • AndroidStudio最常用快捷键总结

    默认在default的kaymap环境下的快捷键 最重要的快捷键 1 ctrl shift A 万能命令行 2 shift两次 查看资源文件 新建工程第一步操作 1 module设置把空包分层去掉 compact empty middle

  • java.lang.ClassNotFoundException解决办法

    java lang ClassNotFoundException com dsep util SessionListener at org apache catalina loader WebappClassLoader loadClass

  • 【MATLAB第10期】基于贝叶斯Bayes算法优化LSTM长短期记忆网络的多输入单输出回归预测模型思路框架

    基于贝叶斯Bayes算法优化LSTM长短期记忆网络的多输入单输出回归预测模型思路框架 前言 前面在 MATLAB第8期 讲解了基于贝叶斯Bayes算法优化LSTM长短期记忆网络的时间序列预测模型 即单输入数据时间序列预测 见本人知乎主页 思

  • 部署gitlab，模拟开发流程

    一 安装gitlab 1 需要先安装依赖包 yum install y curl policycoreutils python openssh server postfix 2 gitlab 下载网址 https mirrors tuna

  • 双系统下Ubuntu突然不能连接WiFi解决办法

    注意是突然不能连接 1 在Windows系统下 我的电脑 gt 管理 gt 设备管理 gt 网络适配器里面有个WiFi 2 选中右键属性 然后把那个运行电脑关机时关闭WiFi节省电脑的 去掉即可

  • 安装WSL，Ubuntu，子系统备份与迁移

    1 安装WSL及Ubuntu 在搜索框里打入cmd以管理员方式运行 键入wsl install并按回车 此命令将启用运行 WSL 并安装 Linux 的 Ubuntu 发行版 默认安装 wsl install 如果不想安装Ubuntu发行版

  • 基于Dlib进行人脸特征点检测的Python代码实现

    一 Python代码实现 import sys import os import glob import dlib import numpy as np import cv2 把imread中的路径修改为自己的图片路径 图片格式为jpeg格

  • Linux操作系统之tcp并发编程

    一 tcp并发编程 运行结果 多线程运行代码 运行结果 二 发送缓冲区与接收缓冲区 运行结果 为什么会出现以上的现象呢 因为在服务端与客户端都存在发送缓冲区与接收缓冲区

  • Unity插件 --- LeanTouch的使用

    在unity自带的asset store搜索 Lean touch 然后找到对应的资源 然后全部都导入到项目中 1 开启和关闭 private void OnEnable LeanTouch OnFingerDown HandeFinger

  • 浅读设计模式

    浅读设计模式 1 引言 2 重新认识一下UML 3 设计模式的七大原则 4 设计模式的分类 5 设计模式的具体说明 6 容易混淆的设计模式之间的区别 6 1创建型设计模式 6 2结构型设计模式 6 3行为型设计模式 6 4跨类对比 7 声明

  • 伪元素::after和::before的”前世今生“

    序言 在做前端页面时 需要做一些样式上的改变 使用伪元素很轻易就做到了 之前一直说伪元素还可以清除浮动 然后就想了解一下这东西到底能干什么 如下图 之前碰到的 为元素添加边框样式 小程序中修改radio checkbox的默认样式 都用到了

热门标签