`
阅读更多
【前言】       最近学生项目遇到一个问题,空标签(空标签详见浅谈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了,要么就是姿势不对了。吐舌头 .
分享到:
评论
相关资源推荐
  • 浅谈web前端开发 我对前端开发的总体体会:第一:杂而难,难度甚至超过了一般的后台开发,如果有人觉得前端开发简单只能说明他还没有入门;第二:web前端开发正在向响应式和移动端方向大步迈进;第三:前端工程师其实就是编程技术人员,用一句话来形容“比UI设计懂技术,比技术人员更懂交互”,当然也有人说前端工程师是工程师中的设计师,是设计师中的工程师。既然是编程工作,那就不会做一辈子,毕竟太累。认真敲几年代码然后去卖水果吧,还望师弟师妹们来照顾我生意。
  • CSS hover如何作用在伪元素before上
  • web前端工程化浅析
  • 使用伪元素简单实现input框的判断√× 一些表单中的输入框输入之后会进行判断,会在input框之后以√×来表示判断的结果,下面我使用伪元素来简单的实现这个功能。
  • 伪元素(3)-解决IE6/IE7/IE8不支持before,after问题 解决IE6/IE7/IE8不支持before,after问题
  • css3和css伪类和伪元素区别与兼容性 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。 对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样
  • WEB前端 -- CSS伪类、伪元素选择器
  • 伪元素::after和::before的理解
  • 浅谈数字媒体技术的后端方向
  • web前端-CSS 伪元素 -023 语法伪元素的语法:selector:pseudo-element {property:value;}CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;}:first-line 伪元素“first-line” 伪元素用于向文本的首行设置特殊样式。 在下面的例子中,浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第
  • 浅谈如何做一名优秀的WEB前端工程师
  • 超级棒的伪元素before与after的使用
  • 伪元素:before、:after的认识
  • css使用伪元素改变checkbox勾选的样式 什么是伪元素伪元素不是真正的元素,不存在与文档之中,所以js无法操作他。那为什么叫他“元素”?因为我们可以对其进行跟元素几乎无差别的操作。 怎样表示伪元素?最好使用双冒号,防止与伪类混淆。 content是伪元素必需的属性,其内容可以分为几类:字符串/attr/url/counter(计算器)。若伪元素没有内容,需赋值为空格: 直接看源代码,里面包含注释,   <!DOCTYP...
  • 使用了 :before 等伪元素中的其中一个来做 animation 动画; 在 animation 动画改变了其中的某个 rem 的值; 在这样的前提下,又是使用有这个 bug 的版本浏览器,那么就
  • css中伪类与伪元素的区别 看了网上的有助于理解css中伪类与伪元素区别的帖子,做了如下笔记: 一:定义: 1.css伪类用于向某些选择器添加特殊的效果 2.css伪元素用于将特殊的效果添加到某些选择器 3.都是向选择器添加特殊效果的(即用css无法描述的效果) 二:理解: a.  伪类的效果是通过给要加特殊样式的元素,增加一个类来完成实现的 伪元素的效果是通过给要加特殊样式的内容加一个元素来实现的
  • 使用javaScript控制伪元素 一、伪元素并不是dom元素,js是无法直接操作它的 伪元素有六个,分别是 ::after 、 ::before、 ::first-line、 ::first-letter、 ::selection、 ::backdrop。 常用的是 ::after 、 ::before。 而且在css3中伪元素要使用两个
  • css伪类与伪元素 在css1中就引入了伪类和伪元素的概念,伪类可以对一个元素的不同状态或者类型进行区分,添加特殊效果。伪元素能为元素的组成部分,或是文本结点内容添加特殊效果。 伪类 我的导师曾说"认识事物可以采用分类法,简单化事物采用分步法"。我们都知道伪类在css1中就存在了,是在HTML元素处于某种状态时,为该元素添加css样式。之后,css2,css3又添加和完善了好些伪类。 结构化伪类 结构化伪类常
  • 浅谈大数据时代web数据可视化探析
  • 空标签的定义 转载—— 作者:黄同学的前端学习笔记 链接:https://www.jianshu.com/p/485ab38242ff 來源:简书   1.空标签的定义: 没有闭合标签的标签被称作为空标签。 在我们使用的标签中,有的具有闭合标签。例如<td>标签,它有闭合标签</td>。但是也有一部分标签没有闭合标签,例如<br />标签,这一类标签我们称之为空...
Global site tag (gtag.js) - Google Analytics