小demo学会使用css中的伪元素::before/::after

最新推荐文章于 2022-02-17 09:06:09 发布
最新推荐文章于 2022-02-17 09:06:09 发布
阅读量319 收藏
点赞数
文章标签： css jquery html5 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44381873/article/details/116602718
版权

！！目标效果

点击能自由切换，前面的小图标用伪类来做。

1.先看HTML结构

<div class="m-check">
        <i class="active">今日</i>
        <i>本周</i>
        <i>本月</i>
        <i>本季度</i>
        <i>本年</i>
</div>

我们并没有给小图给标签和留位置；

2.css样式

   .m-check i::before {
        content: '';
        background: url(../images/index/y2.png) no-repeat;
        background-size: 100% 100%;
        height: 20px;
        width: 20px;
        float: left;
        margin-right: 10px;
    }

找到i标签，加上::before，给::before写样式，注意：contain：''必须有，再给个宽高，就出现在了i的前面，再调调样式就ok啦

附上整体代码：（拿走不谢，好用记得点赞哦）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .m-check {
        margin-left: 15px;
        top: 20px;
        z-index: 5;
        position: relative;
        width: 100%;
    }

    .m-check i {
        color: #000;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        float: left;
        margin-right: 10px;

    }

    .m-check i::before {
        content: '';
        background: url(../images/index/y2.png) no-repeat;
        background-size: 100% 100%;
        height: 20px;
        width: 20px;
        float: left;
        margin-right: 10px;
    }

    .m-check i.active {
        color: #FFEB0F;
    }

    .m-check i.active::before {
        background: url(../images/index/y2-1.png) no-repeat;
        background-size: 100% 100%;

    }
</style>

<body>
    <div class="m-check">
        <i class="active">今日</i>
        <i>本周</i>
        <i>本月</i>
        <i>本季度</i>
        <i>本年</i>
    </div>
</body>
<script src="resource/jquery/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script>
    $('.m-check i').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    })
</script>

</html>

 

✧* ꧁柠檬ヤ汽水꧂✧*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS伪元素 :before, :after, box-shadow应用
12-12
利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子： 1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号； 2、利用 :before, :after, box-shadow 实现3D阴影效果; 3、利用 :before, :after, box-shadow 实现照片叠加效果. 复制代码代码如下: <!DOCTYPE html> <html lang=”zh-cn”> <head> <title>Pseudo Demo</title> <st
伪元素::before与::after的用法
weixin_33898233的博客
04-21 248
::before与::after两个伪元素其实是CSS3中的内容，然而实际上在CSS2中就已经有了这两者的身影，只不过CSS2中是前面加一个冒号来表示（:before和:after）。今天主要讲讲这两个伪元素该如何使用。 一、与普通元素一样可以给其添加样式 比如说我想在文字前面添加一个图标，如果我用普通元素写...
:active:before的使用
sinat_41747081的博客
01-21 1193
当时要实现的一个效果是：一个盒子里有图片，文字，active这个盒子时，盒子的背景色变成某个颜色，要实现的效果是： 最开始的代码是： <div class="list-item"> <div class="item-wrapper"> <img src="./images/taohua.jpeg"> <div>...
记录button按钮点击效果-用:active::before实现
qq_42480062的博客
02-17 615
这次才知道的写法，果然条条大路通罗马。 html： 开始 css实现： .btn-identify{ position: relative; cursor: pointer; outline: none; margin-top: 22px; width: 450px; height: 70px; background: linear-gradient(0deg, #B3B3B3, #CCCCCC); box-shadow: 0px 4px 0px 0px #999999; font-size: 26px;
为什么大家都用i标签<i></i>用作小图标?
weixin_33989780的博客
12-22 1933
用 &lt;i&gt; 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）； &lt;i&gt; 比 &lt;span&gt; 短，但 gzip 后差异很小，不过打字可以少按三个键； 多数图标用的是空 &lt;i&gt; 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。 综合来看，从实用性上暂时没看出...
HTML标签（元素）
m0_38024592的博客
08-25 870
HTML i em与cite区别 标签 &lt;i&gt; 英文全称是 italic ，意思是斜体，它是一个单纯的样式标签（物理标记），指定文本要用斜体。&lt;em&gt;英文全称是 emphasize ，意思是强调，它是一个带有强调意味的标签（逻辑标记），浏览器通常也把它显示为斜体。&lt;cite&gt;英文全称是 citation ，意思是引用，它是定义引用。 HTML 元素边框b...
css 伪元素 :hover :active :before :after :visited :link :focus ...
weixin_30838873的博客
05-29 1040
CSS 伪元素 所有CSS伪类/元素 选择器示例示例说明 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接(点击后的效果) :hover a:hover 把鼠标放在链接上的状态 :focus input:focus ...
<i>元素创建图标的三种方法
Allenyhy的博客
08-08 1万+
1.简单粗暴型 直接设置&lt;i&gt;元素为inline-block，然后为行内级框设置大小，接着直接把图像放在这个框里面，然后调整位置和图片大小即可。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .icon{ display:inline-block; width:50px; height:50px; ba...
vue实战开发009:伪元素中如何引用字体图标
kevinfan的博客
04-18 1402
前面我们有说到如何使用Font Awesome字体图标： vue实战开发008:引入Font Awesome字体图标，在我们使用vue时通常不会把数据写死，而是定义一个数据列表，再通过遍历来获取相应的数据，这里我们模仿2345影视写了点内容，下面的版权声明我都是直接定义的数据列表再遍历展示的。 我们可以看到在上海市互联网违法和不良信息举报中心前面有个Window的图标（我...
空元素是什么？
qq_48281043的博客
09-21 1908
在HTML元素中，没有内容的 HTML 元素被称为空元素。 由于HTML元素的内容是开始标签与结束标签之间的内容。而某些 HTML 元素具有空内容。(empty content)， 那些含有空内容的HTML元素，就是空元素。空元素是在开始标签中关闭的。 ...
CSS伪元素：after：before的特殊用法demo
06-19
伪元素实现tooltip，nav导航栏的炫酷效果以及计数器
微信小程序demo：hicoldcat：css圆角
03-15
简单的圆角实现，可以来看看 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
详解css如何利用 :before :after 写小三角形
01-19
CSS代码如下： .tri-up{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; } .tri-left{width: 0;height:0;border-top:20px solid ...
微信小程序demo：豆瓣电影：使用API(源代码+截图)
06-19
微信小程序demo：豆瓣电影：使用API(源代码+截图)微信小程序demo：豆瓣电影：使用API(源代码+截图)微信小程序demo：豆瓣电影：使用API(源代码+截图)微信小程序demo：豆瓣电影：使用API(源代码+截图)微信小程序demo：...
:before伪类content实现垂直居中
gaidandan的专栏
04-10 6454
设置display: inline-block;的标签i与span标签一起会导致元素垂直不对齐，通过给i标签设置伪类before，content的不可为空，从而实现垂直居中。 未设置伪类before <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt...
before和after效果
weixin_42632642的博客
11-19 429
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is
浅谈css的伪元素::after和::before
weixin_30702413的博客
11-23 3786
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 The CSS ::before(::after)pseudo-elementmatches ...
:before和:after的使用方法
月落星河
05-22 1万+
伪元素可以让我们很方便的加入一个样式，比如在字体前加一个icon，或者加一个下换线，可以不占一个元素的位置，使用起来也很方便，现在介绍一下使用的方法。 注意：:before和:after中的content是必加项 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
如何给使用 i 标签放图标 文字类型图标
热门推荐
BoomMan
09-07 1万+
1.下载矢量图代码地址:阿里巴巴:http://www.iconfont.cn/ 1.登录后找到你喜欢的图片,加入购物车 2.点击自己的购物车 3.选择下载代码 使用代码1.解压如图所示,打开unicode2.使用类似如下代码<i class="iconfont">3</i>3.clss类必须包含 iconfont ,其中的内容跟实例 unicode编码相同即可
http://localhost:80/demo_war_exploded/
最新发布
07-27
根据提供的引用内容，问题是关于解决访问http://localhost:80/demo_war_exploded/的问题。根据引用\[2\]中的描述，问题可能是在访问该URL时出现了额外的路径“demo_war_exploded/”。解决方法是打开IDEA的配置，确保服务器和index的Deployment都设置为“/”。这样可以解决该问题并成功访问URL。 #### 引用[.reference_title] - *1* [IDEA中打开服务器时默认打开链接http://localhost:8080/maven_demo_war_exploded/](https://blog.csdn.net/waiting971118/article/details/122064515)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [localhost:8080/文件 404要用8080/Web_war_exploded/文件名打开的问题解决](https://blog.csdn.net/mosesuifeng/article/details/117439597)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [SpringMVC遇到的问题——GET ...](https://blog.csdn.net/anhanjie/article/details/123540554)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值