css pseudo elements,CSS 伪元素 (Pseudo-elements)
CSS 伪元素用于向某些选择器设置特殊效果。
语法
伪元素的语法:selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用:selector.class:pseudo-element {property:value;}
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:
实例p:first-line { color:#ff0000; font-variant:small-caps; }
注释:"first-line" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-line" 伪元素:font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式:p:first-letter { color:#ff0000; font-size:xx-large; }
注释:"first-letter" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-letter" 伪元素:font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
伪元素和 CSS 类
伪元素可以与 CSS 类配合使用:p.article:first-letter { color: #FF0000; }
This is a paragraph in an article。
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
多重伪元素
可以结合多个伪元素来使用。
在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示:p:first-letter { color:#ff0000; font-size:xx-large; }p:first-line { color:#0000ff; font-variant:small-caps; }
CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个
元素前面插入一幅图片:h1:before { content:url(logo.gif); }
CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个
元素后面插入一幅图片:h1:after { content:url(logo.gif); }
伪元素
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。属性描述CSS
向文本的第一个字母添加特殊样式。1
向文本的首行添加特殊样式。1
在元素之前添加内容。2
在元素之后添加内容。2
css pseudo elements,CSS 伪元素 (Pseudo-elements)相关推荐
- css4个伪元素,CSS_CSS3中的content属性使用示例,CSS中主要的伪元素有四个:befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
- [css] 请举例说明伪元素 (pseudo-elements) 有哪些用途?
[css] 请举例说明伪元素 (pseudo-elements) 有哪些用途? 可以不用再多写一个 dom可以用 content 搭配出很多效果例子:固定尺寸 2:1 的容器文本前后增加 icon 或 ...
- 你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素
小程序中的WXSS(css)选择器课程-::before伪元素 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huan ...
- CSS清除浮动-after伪元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- css多个伪元素,CSS(一)伪元素的巧用
作为一门前端er,你肯定熟知 a:hover a:visited.....我还记得在小本本上记着诀窍:"love 与 hate 纠缠不休",大家都懂的吧.... 伪类和伪元 ...
- [转]你所不知的 CSS ::before 和 ::after 伪元素用法
SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...
- CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记
1. 常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素.常用的几类CSS选择器如下表所示. 选择器 代码 示例代码 说明 通用选择器 * *{} 选择所有元素. 标签选择器 ...
- css中什么是伪元素,CSS伪元素是什么?
什么?伪元素?之前不是说了伪类吗,怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵,其实伪类和伪元素是两个不同的概念,今天小编就为大家介绍一下伪元素. 一.什么是伪元素 css伪元素代表了某个元素的子 ...
- CSS基础(part21)--CSS3伪元素选择器
学习笔记,仅供参考,有错必究 参考自:pink老师教案 CSS3伪元素选择器 伪类选择器: 选择符 简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 伪类选择 ...
最新文章
- 收到2013年51cto限量版精美台历
- 以高效节能为使命 绿色数据中心势在必行
- 《学习JAVASCRIPT数据结构与算法》 ES6 部分笔记
- javalibrary 线上_线上的少儿口才培训班-1V1精品课程【演讲与口才吧】
- Java数组(3)--二维(多维)数组
- php yii把pdf转成图片,yii实现图片上传及缩略图生成的方法
- 解决org.springframework.web.multipart.MaxUploadSizeExceededException报错问题
- HTML如何设置音频播放器控件的大小
- C#联合Halcon 自定义控件鼠标双击响应事件
- php爬取网站所有链接,php 爬取超链接
- Oracle19c下载安装和配置教程
- uniapp开发App如何引入阿里巴巴矢量库图标
- 使用OP-AMP电路将DAC0832输出电压转换为电流
- java安卓读取txt中字符串分割为map
- 华为 Mate8 Emui 5.0 安卓 7.0 root 记录
- 四旋翼的运动原理及几个飞行问题
- 滴滴巨亏背后,打江山容易,守江山难?
- 百度小程序模板制作_百度小程序模板平台
- About MyBatis——有关Mybatis,自问自答系列
- Mac版 Photoshop 2021 绿色版 安装记录