这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方,所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用。 之前我们曾简要的介绍过一些关于伪元素(Pseudo-Element)的文章,下面我们要详细的再说一下。 事实上,伪元素在CSS里是一系列的...
Example of the ::after pseudo-element: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> p::after { content: " - William Shakespeare."; } </style> </head> <body> <h2>::after selector example</h2> <p>"Be or not to be"</p> </body> </html> Tr...
常用的 CSS 伪元素有 ::before、::after、::first-line、::first-letter 等。 语法 伪元素的语法: selector::pseudo-element{property:value;} CSS 类也可以使用伪元素: selector.class::pseudo-element{property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例...
DOCTYPE html><html><head><style>p::first-line{color:#ff0000;font-variant:small-caps;}</style></head><body><p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and m...
伪类选择器(Pseudo-class Selector):例如,要选择所有链接的鼠标悬停状态,可以使用以下样式: 代码语言:javascript 复制 selector:pseudo-class{/* styles */} 伪元素选择器(Pseudo-element Selector):用于创建元素的虚拟部分,如::before和::after。 代码语言:javascript ...
select.class:pseudo-element{property:value;} :first-line伪元素, "first-line"伪元素用于向文本的首行设置特殊样式, p:first-line{ color:#ff0000; font-variant:small-caps; } 注释:"first-line"伪元素只能用于块级元素. 下面的属性可以应用于"first-line"伪元素: ...
CSS进阶篇——伪元素 (pseudo elements) 伪元素(pseudo elements)和伪类(pseudo classes)非常相像,都是依附在选择器上使用 selector:pseudoelement { property: value; }。 首字母 & 首行 first-letter 作用于盒模型元素的第一个字母,first-line 作用于最顶部的...
其中,selector是选择器,pseudo-element是伪元素,property: value;是样式属性和值。 ::first-line 伪元素 这个伪元素可以用来给文本的第一行添加特殊样式。下面是一个例子,它将第一段的第一行文字设置为红色和小型大写字母: p::first-line{color:#ff0000;font-variant:small-caps;} ...
selector::pseudo-element { property: value; } 在CSS选择器中,伪元素选择器有五种: 第一种,双冒号first-letter(::first-letter) 伪元素,用来实现向文本的首个字符,添加特殊样式。 第二种,双冒号first-line(::first-line) 伪元素,用来实现向文本的首行,添加特殊样式。
在此记录一些常用的 pseudo class & pseudo elements. 要查看更多的,MDN 是个好去处,还有对于的浏览器兼容性说明。 :focus pseudo class. 例如,点击了一个输入框,将焦点至于其中,或者 TAB 到了该元素上。 :before & :after pseudo element. 就是在某个元素前/后加入指定内容,当然我并不觉得这个功能很实用,因...