`
阅读更多

【前言】

      最近学生项目遇到一个问题,空标签(空标签详见浅谈HTML空标签)无法使用伪元素。

      

 

【主体】

      原因分析:作为DOM元素,伪元素都是在容器内进行渲染的。input无法容纳其他元素,因此它不支持伪元素。

     规范:

Authors specify the style and location of
generated content with the :before and :after pseudo-elements. As their
names indicate, the :before and :after pseudo-elements specify the
location of content before and after an element's document tree content.
The 'content' property, in conjunction with these pseudo-elements,
specifies what is inserted.

    翻译:

作者用:before和:after伪元素指定生成的内容的样式和位置。
如其名所示,:before和:after伪元素指定了一个元素文档树内容之前和之后的内容。
'content'属性,与这些伪元素联用,指定了插入的内容。

 

【通俗理解】 

      通俗理解:「一个元素文档树内容之前和之后的内容」就是指这个元素是要可以插入内容的,也就是说这个元素要是一个容器。

      input,img,iframe等元素都不能包含其他元素,所以不能通过伪元素插入内容。至于Chrome 中checkbox和radio可以插入,那应该是Bug了,要么就是姿势不对了。吐舌头

.

分享到:
评论

相关推荐

    CSS按钮与伪元素

    在网页设计中,CSS(Cascading Style Sheets)是一种用于控制网页元素呈现样式的语言,而按钮和伪元素是CSS中的重要概念。本教程将深入探讨如何利用CSS来设计美观且功能丰富的按钮,并介绍伪元素在其中的作用。 ...

    css伪元素 长方体 css伪元素 长方体

    css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...

    [CSS] 用伪元素:after实现分割线和气泡

    `:after`是CSS中的一个伪元素选择器,用于在元素内容之后插入内容。本话题将深入探讨如何利用`:after`伪元素来实现分割线和气泡效果。 首先,让我们理解`:after`的基本语法。`:after`伪元素紧跟在选择器后面,然后...

    CSS伪元素:after:before的特殊用法demo

    - 在使用伪元素时,确保它们对辅助技术友好。虽然伪元素的内容默认不可见于屏幕阅读器,但通过设置`aria-label`或`aria-describedby`属性,我们可以使这些内容对残障用户可见。 7. **响应式设计** - 伪元素也适用...

    HTML5&CSS3网页制作:伪元素选择器.pptx

    - 伪元素选择器的写法是 `E:before` 或 `E:after`,其中 `E` 是元素的标签名,表示我们要对哪种类型的元素应用这些样式。 - `content` 属性是伪元素选择器的核心,没有它,伪元素将不会显示任何内容。 - 由于伪元素...

    伪元素选择器

    主要讲的是css3中新增加的选择器,伪元素选择器。

    CSS中的伪元素简介

     提示:如果不用伪元素创建这个首字符放大效果,必须手工给该字母加上标签, 然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。 ::first-line伪元素 格式: CSS Code复制内容到剪贴板 e::first-...

    HTML5选择器和伪元素----学习分享

    1. `::before`和`::after`:这两个伪元素可以在元素的内容前面或后面插入内容。它们通常结合`content`属性使用,可以用于添加图标、装饰性的引号等。 2. `::first-letter`和`::first-line`:分别应用于元素的第一个...

    浅谈CSS伪类与伪元素

    在前端开发中,CSS是构建网页界面的核心技术之一,而伪类与伪元素是CSS中的重要概念,它们扩展了CSS选择器,提供了更多定义元素样式的方法。伪类和伪元素虽然在作用上有所重叠,但它们在设计理念、使用场景和具体...

    css3 transform属性利用伪元素制作字母卡片开关门

    在本示例中,"css3 transform属性利用伪元素制作字母卡片开关门"是一个巧妙地应用了transform属性来实现3D效果的例子。 1. **Transform属性的基本用法** - `transform`属性用于定义元素的2D或3D转换。它接受多个...

    第37章 伪类选择器以及伪元素

    在CSS中,伪类选择器和伪元素是两个非常重要的概念,它们允许我们对某些特定状态或位置的元素应用特殊样式,而无需在HTML中添加额外的标记。本章将深入探讨这两个概念。 ### 1. 伪类选择器 伪类选择器是用来定义...

    css-div的border属性使用&伪元素伪类.docx

    伪类(如`:hover`, `:active`, `:focus`等)用于根据元素的特定状态或行为应用样式,而伪元素(如`::first-line`, `::before`, `::after`)则是在元素内部虚拟创建的内容。对于现代浏览器,推荐使用双冒号`::`来表示...

    伪类、伪元素实例

    https://mp.csdn.net/postedit/88689169 伪类选择元素基于的是当前元素处于的状态,或者说是元素当前所具有的...伪元素是对元素中特定内容进行操作的,它所操作的层次比伪类更深一层,也因此它的动态性比伪类要低很多。

    css3 transitions和伪元素制作4种超酷鼠标经过hover动

    在本文中,我们将深入探讨如何使用CSS3的transitions和伪元素来创建四种独特的鼠标经过(hover)动画效果。这些效果包括滴水效果、圆心放大、旋转放大以及飞翔的独眼怪。CSS3作为现代网页设计的重要工具,提供了一...

    纯css3before和after伪元素结合animation鼠标悬停动画效果

    在本文中,我们将深入探讨如何使用CSS3的`::before`和`::after`伪元素,结合`@keyframes`动画来实现一个鼠标悬停时的动态效果。这两个伪元素在网页设计中扮演着重要的角色,可以让我们在不增加额外HTML标记的情况下...

    给before和after伪元素设置js效果的方法.docx

    给before和after伪元素设置js效果的方法 在CSS中,伪元素(Pseudo-elements)是一种特殊的元素,它允许我们添加额外的元素而不扰乱文档本身。在某些情况下,我们需要给before和after伪元素设置js效果,以实现某些...

    浅谈伪原创

    本文将深入探讨伪原创的本质、目的以及它对网站排名和内容策略的影响。 伪原创通常指的是通过修改、重组或混合现有内容来创建看似新的文章或网页内容。这种做法源于搜索引擎对独特内容的偏好,因为独特且高质量的...

    Web-前端html+css从入门到精通 165. 伪元素概念与意义.zip

    伪元素是CSS中一种特殊的选择器,它允许我们对文档中的某些部分进行额外的样式化,而这些部分在HTML中并不存在。它们的名字以双冒号(::)开头,例如::before和::after。这两个最常用的伪元素分别用于在元素内容之前...

    CSS伪元素实现3D按钮

    这种效果通常通过使用伪元素(`:before` 和 `:after`)以及CSS3的变换(transform)和阴影(box-shadow)属性来实现。下面我们将详细探讨如何利用CSS伪元素实现3D按钮。 首先,让我们了解CSS伪元素。伪元素是CSS中...

Global site tag (gtag.js) - Google Analytics