新增伪元素基本使用方法？（71）

最新推荐文章于 2023-06-30 15:46:34 发布
最新推荐文章于 2023-06-30 15:46:34 发布
阅读量154 收藏
点赞数
分类专栏： css3基础100问 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45147894/article/details/106881524
版权

伪元素六大注意注意点，一定要记清哟

 

一定要记住是双冒号。还有content是一定要写的！ 

伪元素before和after是在 文档树中找不到的

 在IE中甚至连before和after都不显示呀！

给他和宽高。并没有显示出来，因为他是行内元素。 

转化成行内块元素既可以了呀！ 

这样就有了宽高了 

㼛思雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
伪类
02-19
例如，当一个链接被访问过、鼠标悬停或者元素处于活动状态时，我们可以使用伪类来改变其样式。 1. **伪类的基本结构** 伪类通常跟在元素选择器后面，用冒号(:)分隔，例如 `a:hover`。这里的 `a` 是元素选择器，`:...
如何使用伪元素::before和::after?
最新发布
金木编程
08-07 715
伪元素(::before和::after)是CSS中非常有用的特性，它们允许你在元素的内容之前或之后插入额外的内容，并且不需要在HTML结构中添加额外的标记。你可以为伪元素设置宽度、高度、背景颜色、边框等样式。请注意，伪元素只能用于具有content属性的元素，因为伪元素实际上是在元素内容之前或之后插入的额外内容。伪元素的默认定位是相对于其父元素的，它会出现在内容的前面或后面。伪元素必须配合content属性使用，即使你不想在伪元素中显示任何文本内容，也需要指定一个空内容，否则伪元素将不会被显示。
CSS中伪元素详解和用法例子详解
杨杨吖的博客
06-30 2370
伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。
css 伪元素用法
qq_41306423的博客
06-23 589
日期： 2020 年 6 月 23日 伪元素 ::before 和 ::after 序言 最近一直在学习 css 基础相关的一些知识，正好看到伪元素这一块儿，正好记点儿笔记，根据 w3c 记载，伪元素有 4 种： 讲之前先说一下写法的问题，实际上，为了区分伪类和伪元素，我们在写伪元素的时候前面一般是双冒号 :: , 但是即便我们写成单冒号 : ，浏览器也能够自己识别出来，也是可以生效的，所以这个看个人习惯，我比较倾向于双冒号写法，因为有区分作用 好了，下面就开始通过实例来展示一下这些伪元素的效果 ::fi
伪元素使用详解（超详细版）
热门推荐
王二狗
05-06 1万+
1. :after ::after 单双引号的区别其实无论是单引号还是双引号，他们的本质都是伪元素，只不过因为伪类使用的也是单引号，同时他们的写法类似，写法也相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。2.使用伪元素需要注意
【37】CSS3（1）—— 新增选择器④伪元素选择器
倏存的博客
04-08 718
1.新增伪元素2. h5 写法和传统写法区别3. 伪元素的注意事项4.举例
面试宝典 v2-新增Vue和React.pdf
09-13
18. CSS选择器：包括元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。 19. 隐藏DOM元素：display:none和visibility:hidden可以实现元素不可见，前者不占据空间，后者占据空间但不可见。 20. 超链接...
wordpress_udemy：HTML和CSS基本
02-17
4. HTML5新增元素：HTML5引入了新的语义化元素，如`<header>`、`<nav>`、`<article>`、`<section>`和`<footer>`，提高了网页结构的可读性和SEO优化。 二、CSS基础概念 1. 选择器：CSS通过选择器来定位HTML元素，如...
CSS3中的content属性使用示例
09-25
CSS3中的`content`属性是CSS3新增的一个非常有用的功能，它主要用于伪元素`::before`和`::after`，允许我们在元素前后插入内容。这个属性对于网页的装饰和增强用户体验有着重要的作用。以下是关于`content`属性的...
css3新增伪类 伪元素
qq_14993591的博客
06-27 397
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .para { .
伪类选择器新增和伪元素-7/14
weixin_47067248的博客
07-14 207
CSS3 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。 浏览器内核以及其前缀 CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不
伪元素常规用法
SundayGoG的博客
05-19 753
伪元素常用于给在某个元素之前添加图片，例如想在某个dom之前添加图片，却不想在html结构写img标签，就可以在style样式中使用::before添加伪元素。 <html> <div class="container"> <div class="mydiv"></div> </div> </html> 常规写法 .mydiv::before{ content:"", background:url() cent
H5中其他伪元素
sunhaomei的博客
08-20 136
css3新增伪元素选择器::before和::after的概念和实际应用（京东banner小点特效）
qq_37120738的博客
11-19 1125
前言：本人便捷博客能力低下，如果看不懂，请联系我。带来不便，多有抱歉。 一、首先我们需要知道css3新增选择器::before和::after的概念 E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。 div::befor { content:"开始"; } div::after { conte...
伪元素使用
leng0920的博客
08-25 324
1、css :last-child  :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。 2、css :first-child  :first-child 选择器匹配属于其父元素的最后一个子元素的每个元素。 3、伪元素after的用法 /*为每个li添加间隔线*/ ul li:after{ content:"|"; padding-left: 8px;
CSS3新增的伪元素选择器及其使用
m0_49315169的博客
04-07 341
伪元素选择器选择符使用和注意示例 选择符 选择符 简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HIML标签,从而简化HTML结构。 使用和注意 1.before和after创建一个元素 ,但是属于行内元素 2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素 3.语法: element::before{},也有:before{}的写法，但支持IE8 4.before 和a
浅谈CSS伪类和伪元素及CSS3新增伪类
筱葭的博客
02-28 8719
p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type   选择属于其父元素的最后元素的每个元素。 p:only-of-type   选择属于其父元素唯一的元素的每个元素。 p:only-child    选择属于其父元素唯一的子元素的每个元素。 p:nth-child(n)   选择属于其父元素的第n个子元素的每个元素。
伪元素使用的一点儿小技巧
mymy_blog的博客
08-09 764
备注：个人项目中用到介绍一些文章网站可能会记录一篇文章的浏览次数、阅读次数、收藏次数，上面的小图片该如何布局呢，这提供一种解决思路，使用伪元素布局，效果如下： 实现经常使用的伪元素有::before ， ::after等，这里使用::before，部分代码： html<div> <span class="iconfont_love"><a></a></span><
CSS伪类和伪元素及CSS3新增伪类
碉堡飞哥的博客
08-17 726
1、伪类与伪元素 CSS伪类：用于向某些选择器添加特殊的效果。 伪类 作用 :hover 将样式添加到鼠标悬浮的元素 :active 将样式添加到被激活的元素 :focus 将样式添加到获得焦点的元素 :link 将样式添加到未被访问过的链接 :visited 将样式添加到被访问过的链接 :first-child 将样式添加到元素的第一个子元素 :lang 定义指...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值