为什么after伪元素创建了自己的无法移除的边框？ - 腾讯云开发者社区

一、伪元素概念其实从字面意思上理解即可，伪字吗，就是假的意思。伪元素其实就是一个真的存在但又是假的元素，它存在内容，但是它本身并不存在于文档树当中，也没有任何html标签。...二、我们为什么要使用伪元素？ H5之后，增加了很多语义化的元素进来，如nav、hader、footer这种语义化标签，让文档树更为清晰的，也能让样式和内容更好的分离。...; } 3.2、::after ::after在元素内部的后面插入内容。 CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。...另外新创建的元素在文档树中是找不到的 before 和 after 必须有content 属性 before 在父元素内容前面创建元素，after 在元素内容的后面插入元素伪元素选择器和标签选择器一样...伪元素它的父元素就是盒子本身，然后我们只需要设置父盒子相对定位即可，再设置伪元素绝对定位。

8091 0

仅使用CSS，带你创建一个漂亮的动画加载页面

你会问“为什么” 首先，这是一篇关于CSS、伪元素、关键帧动画以及利用这些工具可实现哪些效果的文章。我不认为每个Web App都需要一个加载/启动界面，也不准备在本文中说服你相信这个。...接下来开始有意思的部分。 CSS不允许按我们的想法直接动画操作div.logo的边框。所以，我们必须从矩形上移除边框，寻求不同的方法创建它，一种可以动画操作的方法。...或许我们可以将边框打散成一个个小块，让它们循序地显现？我们可以使用两个透明的伪元素来覆盖整个矩形。每次可以渲染出矩形四条边中的两条。...然后我们通过让伪元素的width和height从0%至100%依次动画显示出来，从而让每个边框单独显示出来。让我们试下吧。首先创建一个静态的版本。...包含伪元素初始状态改变的代码，见下： div.logo { &::before, &::after { /* ... */ width: 0; height: 0;

2.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端-如何只用 CSS 完成漂亮的加载

为什么要做加载只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载我是如何做的不同的页面...并且, 本文假设读者已经非常熟悉伪元素, CSS 动画属性和keyframe, 如果读者想重温, 下面两篇文章可做参考 1、学会使用 CSS 中的 :after 和 :before 2、keyframe..., 然后让它们有序地出现, 所以, 我们可以使用覆盖整个 div 的两个透明的伪元素废话少说, 就让我们开始吧, 我们先做出它最初始的样子....该代码展示了伪元素的初始动画 div.logo { &::before, &::after { /* ... */ animation-timing-function...现在, 我们就有了最外层边框的整个动画. 方块动画最后，我们一起来设置方块的动画我们最大的挑战是无法连接 keyframes。

8942 0

国庆节前端技术栈充实计划（3）：仅使用CSS做一个漂亮的动画加载页面

你会问“为什么” 首先，这是一篇关于CSS、伪元素、关键帧动画以及利用这些工具可实现哪些效果的文章。我不认为每个Web App都需要一个加载/启动界面，也不准备在本文中说服你相信这个。...接下来开始有意思的部分。 CSS不允许按我们的想法直接动画操作 div.logo的边框。所以，我们必须从矩形上移除边框，寻求不同的方法创建它，一种可以动画操作的方法。...或许我们可以将边框打散成一个个小块，让它们循序地显现？我们可以使用两个透明的伪元素来覆盖整个矩形。每次可以渲染出矩形四条边中的两条。...然后我们通过让伪元素的 width和 height从0%至100%依次动画显示出来，从而让每个边框单独显示出来。让我们试下吧。首先创建一个静态的版本。...包含伪元素初始状态改变的代码，见下： div.logo { &::before, &::after { /* ... */ width: 0; height: 0;

2.4K2 0

去除ArcGIS JS API 4.16实例化后的地图拖动时默认自带的5px的外边框

JS API 4.16实例化后的地图拖动时默认自带的5px的外边框，这种方法对4版本的API都是通用的。...有一圈黑色的外边框，但是当我们鼠标移除的时候它会自动消失，所以这就很不舒服，今天就给大家介绍下该如何去除这个烦人的外边框。...解决方法 1、通过在浏览器的控制台扑捉元素后发现，当我们的鼠标点击拖动地图时，我们存放地图的dom元素节点上会增加一个after的伪类，这个默认自带的外边框就是在这个伪类中定义的，所以找到问题后就好解决了...，我们在css文件中直接自己定义一下即可，如下： /*去除mapview拖动时的边框*/ .esri-view .esri-view-surface--inset-outline:focus::after...如果你是在vue中进行项目开发的话，即便添加了以上样式也不会生效，那可能是你的style标签上有scope属性导致的，自己重新新建一个css文件，然后将这两行代码写进新建的文件里，然后在你的地图组件中引入一下吧

1.1K3 0

HTMLCSS 常见面试题汇总

5、HTML5 有哪些新特性，移除了哪些元素？...（4）使用 :after 伪元素 3、请列举几种隐藏元素的方法 visibility:hidden，这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在； opacity:0，是CSS3的属性，...7、CSS伪类与CSS伪对象的区别 CSS引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西，根本区别在于：它们是否创造了新的抽象元素；伪类：描述了所有逻辑上存在但在文档树中无须标识的分类...浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）；浮动元素碰到包含它的边框或者浮动元素的边框停留。...css的content属性专门应用在 after/before 伪元素上，用于插入生成内容，可以配合自定义字体显示特殊符号。

1.5K2 0

【CSS】CSS 总结 ⑥ ( 盒子模型摆放机制 - 普通流浮动定位 | 浮动 - 脱离标准流 | 清除浮动语法 | 额外标签法 | after 伪元素清除浮动 ) ★

样式可设置的属性值 : hidden auto scroll 父级元素设置 overflow 样式清除浮动的优缺点 : 优点 : 代码简单缺点 : 无法显示溢出的元素 , 如果子元素很多...属性 , 会将溢出元素隐藏 , 或生成滚动条 , 导致显示结果不理想 ; 这里提出第三种清除浮动的方法 , 使用 after 伪元素清除浮动 ; 5、清除浮动语法 - after 伪元素清除浮动...在 CSS 样式最上面 , 声明清除浮动元素样式 , 将选择器设置为 .clearfix:after , 其中的 :after 是伪元素 , /* 清除浮动元素样式 */ .clearfix...> 使用上述方法 , 不会改变标签的结构 , 也不会出现隐藏移除元素的问题 ; 6、清除浮动语法 - 使用双伪元素清除浮动为 ....:after { content: ""; display: table; } 为 .clearfix:after 伪类选择器设置如下样式 : .clearfix:after 伪元素选择器

1071 0

前端面试题2（CSS）

规则如下：两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠创建了块级格式化上下文的元素...(携程) 移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing 谈谈浮动和清除浮动浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止...在 CSS 中伪类一直用 : 表示，如 :hover, :active 等伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after 后来在CSS3中修订，伪元素用 ::...表示，如 ::before 和 ::after，以此区分伪元素和伪类由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素综上所述：::before...是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法如何修改Chrome记住密码后自动填充表单的黄色背景？

2.8K1 1

为什么大家都用i标签用作小图标?

属性，如果你移除了，伪元素将不会起作用。...你的直觉是：before和：after伪元素可能是插入的内容会被注入到目标元素的前或后注入？但是，正如上面提到的，不是这样的。...在css中，这段内容被设置了宽度，以及一些padding和可见的边框然后我们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容之前。...随后css给了它一个边框以及一些padding和margins。这里是浏览器中查看的结果：外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。...当然，并不是所有的例子都符合自己的实际，但根据不同的情况，一个特定的属性值作为一个伪元素可以是实际的。然而，获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。

1.8K5 1

解决方案：实现Vue3.2+Vant点击选中按钮，右下角显示三角形勾选 + 破碎图片占位

对应到css的select部分，当选中时，为其渲染边框，颜色提示选中，然后渲染右下角的三角形和勾采用的是伪类元素：::before 和::after::before 表示在原始元素的实际内容之前表示一个可设置样式的子伪元素...::after 在原始元素的实际内容之后立即表示一个可设置样式的子伪元素。...给元素设置伪元素的时候，必须设置其content属性，浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串：content: ""，这里我们采取了这种方案。...: transparent;移除矩阵上部和下部的边框，如下所示：最后同样使用transform: rotate(45deg);将其旋转45度，成功达到效果：在这里的::before和::after只代表渲染的顺序...伪元素还可以用来做破碎图片占位当用户网络出现问题的时候，可能会造成某些图片的访问失败，从而浏览器将显示一张损坏的图片，极其影响界面美观，比如：因为

1541 0

每天10个前端小知识【Day 15】

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。...::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after 4.margin和padding分别适合什么场景使用？...换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 6.为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？浮动元素碰到包含它的边框或者浮动元素的边框停留。...浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

891 0

圣诞快乐，手绘CSS圣诞老人，DIY浪漫圣诞礼物！

绘制圣诞老人的帽子在这个环节，我们将绘制圣诞老人的帽子，这包括帽子本身和两个伪元素：::before 和 ::after。...使用伪元素的好处在于它们的大小和位置将相对于帽子元素，这意味着我们只需修改帽子元素，就可以同时更新所有三个部分。...虽然我们可以用三个独立的元素来构建帽子、帽檐和球状饰品，但通过使用伪元素，我们可以更好地练习和展示CSS的能力。...最后，对于靴尖，我们使用::after伪元素，并且圆滑顶部的角： ...通过使用变量、伪元素、渐变、边框半径和动画关键帧等CSS功能，我们不仅制作出了一个有趣的圣诞老人图像，还实现了雪花飘落的效果，让整个场景更加生动。

1411 0

前端面试题-HTML+CSS

清除浮动的方式：为父元素设置高度为父元素添加overflow:hidden 伪元素 1 2 3 4 5 .fix::after { content:""; display:block...BFC：块级格式化上下文，创建了 BFC 的元素就是一个独立的盒子，它规定了内部如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素，计算 BFC 的高度时，浮动元素也参与计算...::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。...（伪元素由双冒号和伪元素名称组成）, 双冒号是在当前规范中引入的，用于区分伪类和伪元素 12....CSS 优化、提高性能的方法有哪些移除空的 css 规则（Remove empty rules）正确使用 display 的属性不滥用浮动、web 字体不声明过多的 font-size 不在选择符中使用

9773 0

有趣的CSS小示例：好看的皮囊千篇一律，有趣的灵魂万里挑一

原来是dot元素，沿着Y轴在循环位移，隐藏掉就让你看到了加载的动画效果。 ? border 实现边框 ? 当你需要这样一个上传文件，按钮时，你考虑的是找设计弄个图片，还是自己写一个？？？...但是，当元素添加了一些伪元素或半透明的装饰之后，box-shadow就有些力不从心了，因为 border-radius 会无耻地忽视透明部分。...这类情况包括下列几种情况: 1、半透明图像、背景图像、或者 border-image(比如老式的金质像框); 2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当 background-clip...不是 border-box 时); 3、对话气泡，它的小尾巴通常是用伪元素生成的; 4、几乎所有的折角效果 5、通过 clip-path 生成的形状。...从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？ ? 可以很明显的看出区别，为什么会这样呢？

9964 0

CSS3入门

：外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白内边距（padding）：元素里的内容与元素边框之间的距离边框（border）：元素本身内容（content）：元素中放置的东西...: hidden | auto | sroll; after 伪元素法 after伪元素法是额外标签法的升级版（推荐) 核心原理:利用CSS3的新特性自动创建一个叫做after的伪元素，再使用clear...:both进行浮动清除双伪元素法双伪元素是after伪元素的升级方法核心原理:利用CSS3的新特性自动创建before和after两个伪元素，再使用clear:both进行浮动清处清除浮动细节...推荐用法 after伪元素法(京东)、双伪元素法(小米商城官网)。...相对定位相对定位(relative)是元素相对于自己在标准流中原来的位置不会放弃它在标准流中占据的位置 *{ position: relative; } 绝对定位绝对定位(absolute

1.6K1 0

HTML详解连载（7）

下面进行专栏介绍本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记进行适当修改。...开始喽结构伪类选择器作用根据元素的结构关系查找元素关键字含义 E:first-child 查找第一个E元素 E:last-child 查找最后一个E元素 E:nth-child（N）查找第...+5 伪元素选择器作用创建虚拟元素（伪元素），用来摆放装饰性的内容 E::before 在E元素里面最前面添加一个伪元素 E::after 在E元素里面最后面添加一个伪元素注意：必须设置content...：“”属性，用来设置伪元素的内容，如果没有内容，则引号留空即可不写伪元素失效伪元素默认是行内显示模式权重和标签选择器相同 PxCoook 像素大厨是一款切图设计工具软件，支持PSD文件的文字...父级设置padding 父级设置overflow：hidden 父级设置border-top 行内元素-内外边距问题场景行内元素添加margin和padding，无法改变元素垂直位置解决方法

1353 0

CSS基础（二）

伪元素概念：使用CSS模拟标签，创建网页中不重要的图用法：找父级，在父级中添加子标签伪元素作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...默认是行内元素 2. content必须添加，即便是空。否则伪元素不生效。 3. 伪元素在网页中无法通过鼠标直接复制粘贴。...background-color: pink; } 三、结构伪类选择器：作用：通过结构找到目标标签或者文本匹配父元素中的第n个子元素（注意：是所有标签而不是需要改变的标签） E:nth-child...二、相对定位占有原来的位置仍然具有具体标签原有的显示模式特点改变的位置是参照自己原来的位置三、绝对定位...七、表格边框合并相邻表格边框进行合并，得到细线边框效果。

1.8K2 0

重温前端-css篇

CSS 中提供了一系列的伪元素，如下表所示：伪元素例子例子描述 ::after p::after 在每个元素之后插入内容 ::before p::before 在每个元素之前插入内容 ::...::after 伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效...::after 伪元素 ::after 伪元素 ::after ...1、text-indent、text-align 9、css预处理工具参考答案： CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。...(5)用after伪元素清除浮动给外部盒子的after伪元素设置clear属性，再隐藏它这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。

8123 0

CSS垂直居中的七个方法

七种垂直居中的方法设定行高（line-height）添加伪元素 calc动态计算使用表格或假装表格转变绝对定位使用Flexbox 1.设定行高（line-height）设定行高是垂直居中最简单的方式...不过由此就可以抛光，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间隔会变超大，就不是我们所期望的效果了。...{ display：inline-block; 宽度：30px; 高度：30px；背景：＃c00; } 2.添加伪元素（:: before，:: after）刚刚第一种方法，虽然是最简单的方法...（适用于单行标题），不过就是只能单行，所以我们如果要让多行的元素也可以垂直居中，就必须要使用伪元素的方式。...所以我们就要把脑筋动到“伪元素”身上，利用:: before和:: after添加div进到杠杠内，让这个“伪” div的高度100％，就可以轻松地让其他的div都居中。不过不过不过！

2.3K3 0

如何画0.5px的边框线（详解）

::after定位伪类实现的思路 transform 缩放实现的思路 border-image: linear-gradient 边框线性渐变的思路答案...border-image: linear-gradient 边框线性渐变的答案理解 box-shadow阴影实现的理解 ::after定位伪类实现的理解...::after定位伪类实现的思路直接设置伪类元素，设置指定的高度，通过定位来控制位置。 ...::after定位伪类实现的理解这种方法直接设置0.5px的高度，高度同样允许小数px，我们生成了一个新元素，来改变它的高度，让它充当边框。 ...transform 缩放实现的理解利用缩放属性，我们设置一个1px边框，长度和宽度设置为被包裹子元素的两倍，当它缩小0.5的时候，就正好变成了子元素的宽高

1.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

「后端小伙伴来学前端了」CSS3伪元素选择器 ::before ::after | 记录自己的前端学习日子

仅使用CSS，带你创建一个漂亮的动画加载页面

前端-如何只用 CSS 完成漂亮的加载

国庆节前端技术栈充实计划（3）：仅使用CSS做一个漂亮的动画加载页面

去除ArcGIS JS API 4.16实例化后的地图拖动时默认自带的5px的外边框

HTMLCSS 常见面试题汇总

【CSS】CSS 总结 ⑥ ( 盒子模型摆放机制 - 普通流浮动定位 | 浮动 - 脱离标准流 | 清除浮动语法 | 额外标签法 | after 伪元素清除浮动 ) ★

前端面试题2（CSS）

为什么大家都用i标签用作小图标?

解决方案：实现Vue3.2+Vant点击选中按钮，右下角显示三角形勾选 + 破碎图片占位

每天10个前端小知识【Day 15】

圣诞快乐，手绘CSS圣诞老人，DIY浪漫圣诞礼物！

前端面试题-HTML+CSS

有趣的CSS小示例：好看的皮囊千篇一律，有趣的灵魂万里挑一

CSS3入门

HTML详解连载（7）

CSS基础（二）

重温前端-css篇

CSS垂直居中的七个方法

如何画0.5px的边框线（详解）

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐