CSS before / after伪元素

CSS伪类对象 after和before的用法

IE对after、before是不支持的，请在firefox、opera、chrome下试调！

　　:before

　　语法：Selector : before { sRules }

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

　　:after

　　语法：Selector : after { sRules }

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

看以下这句定义的理解,也许你会更清楚一点...呵呵...

:after 伪元素在元素内容之后插入内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>after伪元素</title>

div{border:1px solid #000000;}

.a:after {

content: "after后面";

color:red;

border:1px solid red;

}

.b:after {

content: "after后面";

color:red;

display:block;

border:1px solid red;

}

.c:before {

content: "before前面";

color:red;

border:1px solid red;

}

a:after{content:"(link)";}

a:before{content:"链接";}

a.ss:after{content:"(linkss)";}

a.ss:before{content:"ss链接";}

</style>

</head>

<body>

<h3>:after 伪元素在元素内容之后插入内容。这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。</h3>

<div class="a">jianan8610</div>

<div class="b">jianan8610</div>

<div class="c">jianan8610</div>

<br/>

<h3>用 :after 及 :before 伪元素一起使用，在对象前或后插入内容。对应的脚本特性为 content </h3>

<a href="http://hi.baidu.com/jianan8610">jianan8610</a> <br><br>

<a href="http://hi.baidu.com/jianan8610" class="ss">jianan8610</a>

</body>

</html>

转载于:https://blog.51cto.com/tommike/830727

CSS before / after伪元素相关推荐

[css] 如何使用伪元素实现增大点击热区来增加用户体验？
[css] 如何使用伪元素实现增大点击热区来增加用户体验? .extend-via-pseudo-elem {position: relative; }.extend-via-pseudo-elem: ...
CSS 中的伪元素是什么，有什么用处
CSS 中的伪元素是一种特殊的元素,它们不是 HTML 元素,但通过 CSS 属性和关系运算符,我们可以为它们指定与实际 HTML 元素相同的样式.伪元素可以用于实现一些特殊的效果,比如动画.阴影.弹 ...
并不简单的翻页时钟（一）：样式篇（Flex布局、line-height、data-set用法、css before after伪元素）
目录并不简单的翻页时钟我以为的翻页时钟实际上的翻页时钟关键的知识点效果展示代码解析 HTML CSS 详解CSS 1.display:flex 元素居中 2.:before .:after ...
【CSS】457- CSS 伪元素指南
层叠样式表(css)是一种独立的语言,用于描述web应用程序的表示.这涉及到诸如颜色.字体和HTML元素布局的完全控制等概念. 在本文中,将为您介绍级联样式表中的伪元素,以及如何将它们与兼容性一起使用 ...
css伪元素覆盖,CSS :befor :after 伪元素的巧妙用法
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
HTML与CSS基础之伪元素(五)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>伪元素 ...
Python攻城师的成长————css语法、伪元素选择器（部分）
今日学习目标熟悉并掌握css中各种修改属性的方法. 文章目录今日学习目标学习内容一.伪元素选择器 css操作文本内容选择器优先级二.css修改属性 css修改文字属性 css修改字体属性 ...
CSS如何使用伪元素选择器给所有的div里的文本前面添加小写罗马数字编号
一.需求说明假设现在我有三个div标签,它们在浏览器里显示的内容如下图所示: 我希望使用CSS给它们全部添加上序号,添加好序号后的样子如下图所示: 可以看到序号是递增的,不是普通的阿拉伯数字,而是小 ...
CSS之通过伪元素添加图标字体
这里使用的是Font Awesome图标字体库通过伪元素设置图标字体: 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 fab: ...

CSS before / after伪元素

CSS before / after伪元素相关推荐

最新文章

热门文章