开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么我看不到我的before伪元素和idk为什么after元素延伸超过<a>元素

在前端开发中，伪元素是指通过CSS选择器来创建的虚拟元素，它们不是DOM树的一部分，但可以通过CSS样式进行控制和定位。常见的伪元素有before和after。

before伪元素：before伪元素用于在目标元素的内容之前插入一个虚拟元素。它可以用来添加装饰性的内容或图标等。在使用before伪元素时，需要设置content属性来指定要插入的内容。
after伪元素：after伪元素用于在目标元素的内容之后插入一个虚拟元素。它也可以用来添加装饰性的内容或图标等。同样地，在使用after伪元素时，需要设置content属性来指定要插入的内容。

根据你的描述，你无法看到before伪元素和after伪元素的可能原因有以下几种：

CSS选择器错误：请确保你正确地使用了before和after伪元素的CSS选择器。通常情况下，它们的选择器分别为:before和:after。
内容为空：如果你没有设置content属性或将其设置为空，那么before和after伪元素将不会显示任何内容。请检查你的CSS代码，确保设置了合适的content属性。
定位错误：如果你没有正确地为before和after伪元素设置定位属性，它们可能会被默认定位在目标元素的内部或其他位置，导致无法显示。请检查你的CSS代码，确保为伪元素设置了正确的定位属性，如position、top、left等。

关于为什么after元素延伸超过<a>元素的问题，可能是由于以下原因：

内容溢出：如果after伪元素的内容过长或宽度设置不当，可能会导致其延伸超过<a>元素。请检查你的CSS代码，确保为after伪元素设置了合适的宽度和溢出处理方式，如使用overflow属性进行控制。
定位错误：如果after伪元素的定位属性设置不当，可能会导致其位置偏移或超出<a>元素的范围。请检查你的CSS代码，确保为after伪元素设置了正确的定位属性，如position、top、left等。

总结起来，要解决无法看到before伪元素和after伪元素以及after元素延伸超过<a>元素的问题，你需要仔细检查你的CSS代码，确保选择器、内容、定位等属性设置正确。如果问题仍然存在，可能需要进一步调试和排查其他可能的原因。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:TodoList网页，比鼠标覆盖/输出更好的事件侦听器？为什么我的伪元素：：第一个字母不起作用？为什么after伪元素创建了自己的无法移除的边框？为什么Firefox搞砸了我的可内容编辑元素的文本和占位符？为什么“makes top：-15px”会让我的伪元素垂直对齐？为什么在selenium中，当页面自动滚动时，我的元素看不到？为什么对于超过1个元素的堆栈，我的大小总是1？为什么我尝试添加到列表中元组的第三个和第四个元素不起作用？为什么我的'h2‘元素与'section’和'.frame‘元素重叠？为什么我的伪元素出现在一个HTML演示中，而不是出现在我的angular 5应用程序中？为什么我的新数组只复制和反转旧数组的前10个元素？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

你会用::before、::after吗 ::before和::after伪元素的用法

::before和::after伪元素的用法一、介绍 css3为了区分伪类和伪元素，伪元素采用双冒号写法。...常见伪元素——::first-letter,::first-line,::before,::after,::selection。...::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。...所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下： <!...4、不使用图片创建小图标举例：比如一个电话很巧妙的应用一个div左border加圆角当机身，::before和::after配合圆角当听筒。

3.5K1 0

CSS 3.0中伪元素after和before的妙用

我们常用CSS 3.0中的伪元素来修饰一些细节，让页面看起来效果更好，比如下面这个图片中的面包屑导航中的符号，还有任务清单前的序列符号，都是用伪元素实现的。 ?...以下是代码实现，希望能对初学者有一个简单的认识。 CSS 3.0中伪元素...after和before的妙用 /* 面包屑导航 */ .breadcrumb {...{ content: " » "; } .breadcrumb a::after {

1.1K1 0

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

然而，由于历史原因，单冒号也可以用于表示某些伪元素，如:before、:after。这种用法在CSS2中被允许，但在CSS3中不再推荐。...关于 ::before 和 ::after 伪元素的作用： ::before 伪元素：用于在选定元素的内容前插入一个生成的内容。...::before 和 ::after 伪元素可以用于在元素的内容前后插入生成的内容，用于装饰、布局等目的。除了::before和::after之外，还有哪些常用的CSS3伪元素？...除了 ::before 和 ::after，CSS3 还引入了一些其他常用的伪元素。...::before 和 ::after 之外的伪元素还可以通过 content 属性生成内容，例如 ::marker 可用于自定义列表项标记的样式。

4132 0

CSS 伪元素的一些罕见用例

上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。伪元素已经使用了很长时间。...添加伪元素然后，我为每个元素添加了:before和:after伪元素，其宽度为50％（为了更好的演示，我为每个元素添加了不同的背景） .elem:before, .elem:after { content...); } 还有另一种选择，即在伪元素:before和:after之间交换skewY值。...:after VS :before 在最近的Twitter讨论中，我了解到最好使用:before而不是:after。 为什么？...因为在使用:after时，可能需要我们向其他嵌套元素添加z-index，以便伪元素不会与它们重叠。我们举一个真实的例子。这是一张由缩略图和标题组成的简单卡片。

7964 0

讲一下怎么区分伪类、伪元素，同时优雅的处理页面浮动的问题

原因很简单，因为我发现这几个概念不仅仅是编码的人搞不明白，很多的前端，就是靠这个技术吃饭的人都很多搞不明白怎么回事的，为什么和浮动一起说呢，其实这篇文章真正的要说的是浮动给我们的布局带来的问题，我们应该怎么合理的处理...，还有就是伪元素到底是什么，我们应该怎么优雅的使用，那为什么写伪类呢？...因为我发现竟然有人把伪类和伪元素一直看成一种东西，这个我是接受不了的，所以一起说一下。...那么上面:这个符号连接的就是伪类，帮助我们做一些样式用的，本质是一个css 伪元素介绍首先要明白的是伪元素是html标签本身的属性，和css没有关系，只是我们使用css样式将这个东西展现了出来，这是一点...，那么这个办法也是可以直接解决父级元素看不到的问题，但是我们为什么不建议那么做呢，原因是很简单，我们一般是不改变原页面结构的，我们为了实现一个功能改变了原来页面结构是非常不合理的一个做法，所以才有了今天下面的写法

4881 0

仅用一个HTML标签，实现带动画的抖音LOGO

就算你用 ::before 和 ::after，也加上标签本体一共也就三个部分而且！抖音的 logo 是有两层的：可以看到，是一个青色的音符和一个红色的音符叠加的所以！...需要在一个伪元素中一笔画出整个音符图案（容我思考一下…）如何在一个伪元素中一笔画出整个音符图案呢？...100%）的结束位置开始一直到容器的边缘，都显示为透明现在再来看看效果：这样一个 1/4圆环就画好了那么回到我们的正文来 .douyin::before, .douyin::after {...，MDN的定义就是使当前元素与其父元素的内容和背景以某种方式混合，支持的属性有些多，本文就不跳出去讲太多别的东西了，我直接在控制台一个个试过去，发现 lighten、plus-lighter、screen...里的，一定很酷，但是有些无能为力，因为要给音符设置故障风效果，是要用到伪元素的，而现在音符本身已经是伪元素了，我不能脱离了我本文的标题 “仅用一个html标签，实现带动画的抖音Logo” ，如果你感兴趣

1.2K1 0

CSS魔法堂：一起玩透伪元素和Content属性

初识伪元素说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。...那这时我不禁地想问：“直接添加两个class为.before和.after不是一样的吗？” ...其实使用伪元素::before和::after以下两个好处： HTML的代码量减少，对SEO有帮助；提高JavaScript查询元素的效率。那为什么会这两好处呢？...但这也引入一个问题——我们没办法通过JavaScript完全操控伪元素（我将在下面一节为大家讲述）一大波伪元素来了除了::before和::after外，别漏了以下的哦！...的内容无法被用户选中的；伪元素和伪类结合使用形如：.target:hover::after。

6673 1

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

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

8912 0

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

如果你看上图代码没有看懂，请看下图，我注释掉一行代码，你就明白了。原来是dot元素，沿着Y轴在循环位移，隐藏掉就让你看到了加载的动画效果。 ? border 实现边框 ?.../after伪类做 + 号样式*/ .upload:before, .upload:after{ content: ''; position: absolute; top: 50%; left...但是，当元素添加了一些伪元素或半透明的装饰之后，box-shadow就有些力不从心了，因为 border-radius 会无耻地忽视透明部分。...不是 border-box 时); 3、对话气泡，它的小尾巴通常是用伪元素生成的; 4、几乎所有的折角效果 5、通过 clip-path 生成的形状。...从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？ ? 可以很明显的看出区别，为什么会这样呢？

9844 0

我不知道你知不知道但前端NEXT知道的伪元素小技巧

伪元素伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？...在开发中如果我们遇到类似这样的需求我们？我们应该如何只用一个简单的css元素去实现他？方案：一个p标签,左右两条线用before和after画出来： ?...没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技； 4.平行四边形有没有办法只让容器的形状倾斜而保持其内容不变呢...那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？...需要注意的是img/input等单标签是没有before/after伪元素的，因为它们本身是不可以有子元素，如果你给img添加一个before，那么会被浏览器忽略。

9737 0

重新认识伪类和伪元素

熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆(包括我)。那今天就让我们来看看伪类和伪元素的区别吧!...伪类与伪元素先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements...::before/:before 在被选元素前插入内容 ::after/:after 在被元素后插入内容，其用法和特性与:before相似。...对于伪元素 :before 和 :after 而言，属性 content 是必须设置的，我们知道属性的值可以为字符串，也可以有其它形式，比如指向一张图片的 URL: content: url('img/...伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

9522 0

我不知道你知不知道我知道的伪元素小技巧

伪元素伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？...在开发中如果我们遇到类似这样的需求我们？我们应该如何只用一个简单的css元素去实现他？方案：一个p标签,左右两条线用before和after画出来： ?...没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技； 4.平行四边形有没有办法只让容器的形状倾斜而保持其内容不变呢...那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？...需要注意的是img/input等单标签是没有before/after伪元素的，因为它们本身是不可以有子元素，如果你给img添加一个before，那么会被浏览器忽略。伪元素能实现的功能很多！

9512 0

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

前端面试基础知识题 1.两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？...::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。...::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after 4.margin和padding分别适合什么场景使用？...换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 6.为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？浮动元素碰到包含它的边框或者浮动元素的边框停留。

851 0

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

二、我们为什么要使用伪元素？ H5之后，增加了很多语义化的元素进来，如nav、hader、footer这种语义化标签，让文档树更为清晰的，也能让样式和内容更好的分离。...三、::before 和 ::after 3.1、::before 旧写法(:before). ::before,在元素内部的前面插入内容。...; } 3.2、::after ::after在元素内部的后面插入内容。 CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。...如下示例：加了之后就ok拉 before 和盒子和 after 之间的关系大致如下图 3.4、注意点 before和after会创建一个元素，但是创建出来的元素是属于行内元素。...另外新创建的元素在文档树中是找不到的 before 和 after 必须有content 属性 before 在父元素内容前面创建元素，after 在元素内容的后面插入元素伪元素选择器和标签选择器一样

6971 0

移动端重构实战系列2——line list

把1px挂在除第一个元素之外的伪元素before上，而第一个最上面和最后一个最下面的1px将会在父元素上实现，那样中间line-item之间的1px就很容易扩展实现缩进。...每个line item的高度为44px(ios 的标准高度为44px)，实现方法为line-height + padding，为什么不是直接line-height:44px，这就涉及到我们下面更多的扩展形态了...; // 添加最上和最下的1px，形成封闭 .line-item::before { left: 10px; // 缩进10px } } .line-list--after-v...} } PS：这里缩进用的伪元素before的1px left定位来实现的，看到过有些方法是设置item的border-bottom，然后设置item的margin-left: 10px，这种实现方法是错误的...，单选同样可以保持结构不变，通过after元素生成选中的对钩；而多选则可以添加i.icon-checbox元素。

3732 0

关于伪类元素:before和:after

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下： #example:before { content...但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。...但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。...()函数会返回指定元素对应属性的值 :before和:after的一些惊人用法 >. clearfix hack 如果父元素容器里面的子元素是浮动元素的话，我们一般需要在父元素闭合前添加一个clear:...下面是利用:before和:after的一个实现：(via Nicolas Gallagher) /* For modern browsers */ .clearfix:before, .clearfix

1K1 0

「HTML+CSS」--自定义按钮样式【001】

中间的文字使用span标签，需要使用span标签的伪类左下角的两条线利用span的伪类::before/::after实现，原理类似右上角 Demo代码 HTML <!...首先，使用::before和::after伪类，在button的前后添加两个伪元素一个width=0，height=2px；另一个height=0，width=2px ? ? ?...这里便于理解和观察，我们将这两个元素显示出来修改css代码：将before改为红色，便于观察，同时width、height都改为20px .btn::before,.btn::after{ position...实现宽度的延伸，另一个after就实现高度的延伸，所以一个元素的两个伪元素就可以实现两条线的延展效果同样，左下角的延展就是利用span的::before和::after伪元素了踩坑 1.父元素button...原因：因为button的before和after伪元素中的 position:absolute; 所以必须设置button position: relative， position中absolute是指

1.9K2 0

移动端重构实战系列2——line list

把1px挂在除第一个元素之外的伪元素before上，而第一个最上面和最后一个最下面的1px将会在父元素上实现，那样中间line-item之间的1px就很容易扩展实现缩进。...每个line item的高度为44px(ios 的标准高度为44px)，实现方法为line-height + padding，为什么不是直接line-height:44px，这就涉及到我们下面更多的扩展形态了...; // 添加最上和最下的1px，形成封闭 .line-item::before { left: 10px; // 缩进10px } } .line-list--after-v...} } PS：这里缩进用的伪元素before的1px left定位来实现的，看到过有些方法是设置item的border-bottom，然后设置item的margin-left: 10px，这种实现方法是错误的...，单选同样可以保持结构不变，通过after元素生成选中的对钩；而多选则可以添加i.icon-checbox元素。

2891 0

移动端重构实战系列2——line list

把1px挂在除第一个元素之外的伪元素before上，而第一个最上面和最后一个最下面的1px将会在父元素上实现，那样中间line-item之间的1px就很容易扩展实现缩进。...每个line item的高度为44px(ios 的标准高度为44px)，实现方法为line-height + padding，为什么不是直接line-height:44px，这就涉及到我们下面更多的扩展形态了...; // 添加最上和最下的1px，形成封闭 .line-item::before { left: 10px; // 缩进10px } } .line-list--after-v...} } PS：这里缩进用的伪元素before的1px left定位来实现的，看到过有些方法是设置item的border-bottom，然后设置item的margin-left: 10px，这种实现方法是错误的...，单选同样可以保持结构不变，通过after元素生成选中的对钩；而多选则可以添加i.icon-checbox元素。

5908 0

带有CSS3的动画3D条形图

在实际编写代码之前，我通常会写下所有可能遇到的挑战，并在一个特定的项目中考虑我所能想到的解决方案，并重复这个过程直到我看到一个看起来像是可以执行的策略。...我们使用：before伪类生成这个元素; 我们将在本教程中使用：之前和之后：伪类很多。...我们将100％的宽度设置到我们的标记支架上，以便能够在整个图形中绘制，使用虚线边框来设置我们的Y轴线并定位跨度元素，使得Y轴标签为在图表之外。...所以，我们已经使用了 transform：skew（）和transform：rotate（）为了转换我们的元素，使它们一起产生一个3D对象的错觉：之前和之后：伪类生成与CSS的元素，并保持我们的HTML...标记相对干净：nth-last-child（）和：不是用于定位特定列表项的伪类，并避免向标记中添加额外的类/ ID 线性渐变连同background-position一起部分填充背景元素 rgba（）

8118 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭