CSS :before :after 伪类选择器

所有主流浏览器都支持 :after 选择器。

注释：对于 IE8 及更早版本中的 :after，必须声明 <!DOCTYPE>。

　　:before

　　语法：Selector : before { sRules }

　　说明：用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。

　　:after

　　语法：Selector : after { sRules }

　　说明：用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。

　　content

　　取值：

　　attr(alt) :　使用对象的 alt 属性的文字

　　counter(name) :　使用已命名的计数器

　　counter(name, list-style-type) :　使用已命名的计数器并遵从指定的 list-style-type 属性

　　counters(name, string) :　使用所有已命名的计数器

　　counters(name, string, list-style-type) :　使用所有已命名的计数器并遵从指定的 list-style-type 属性

　　no-close-quote :　并不插入 quotes 属性的后标记。但增加其嵌套级别

　　no-open-quote :　并不插入 quotes 属性的前标记。但减少其嵌套级别

　　close-quote :　插入 quotes 属性的后标记

　　open-quote :　插入 quotes 属性的前标记

　　string :　使用用引号括起的字符串

　　url(url) :　使用指定的绝对或相对 url 地址

　　说明：用来和 :after 及 :before 伪元素一起使用，在对象前或后显示内容。对应的脚本特性为 content 。

—————

p:after {

content:"- 台词";

background-color:yellow;

color:red;

font-weight:bold;

}

a[href]:after{content:"(link)";}

a[href]:before{content:"链接";}

CSS :before :after 伪类选择器相关推荐

前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结锚伪类选择器:hover,:active,:visited;等用法总结一.什么是锚伪类在支持 CSS 的浏览器 ...
【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器伪类选择器根据 ...
HTML与CSS基础之伪类选择器(三)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>伪类选 ...
CSS UI状态伪类选择器
UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验. 表单元素的状态包括获得焦点.失去焦点.选中.未选中.可用.不可用 ...
【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
CSS定位+装饰+伪类选择器拓展
文章目录 CSS定位定位能解决的解决问题: 定位的使用静态定位相对定位绝对定位绝对定位特点子绝父相子绝父相vs子绝父绝子绝父相案例子绝父相水平居中案例子绝父相水平垂直都居中案例导 ...
css布局，伪类选择器练习
css伪类选择器练习为了熟练掌握css各种选择器,还是需要多加练习完成以下布局: 要求:掌握好类名的使用,伪类选择器使用正确,并活用以学习的标签及标签特性. 分析:此次练习中出现大量的a标签(均需 ...
css中的伪类选择器有哪些
1 伪类选择器 ① 动态伪类选择器(5个) :link 选择地址没有被访问过的超链接元素 :visited 选择地址被访问过的超链接元素 :hover 选择鼠标悬停在上面的元素. :active 选择 ...
css 中的伪类选择器before 与after
.cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...

CSS :before :after 伪类选择器

CSS :before :after 伪类选择器相关推荐

最新文章

热门文章