CSS伪元素:before, :after
类别:Web前端 浏览量:1067
时间:2015-7-5 CSS伪元素:before, :after
CSS伪元素:before, :after这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。
2、:after 伪元素在元素之后添加内容
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。
<style>
.li{width:350px; border:1px solid #000; line-height:50px; margin:10px;}
.lib{width:500px; border:1px solid #FC0;}
.after,.before,.block{border:1px solid #330;}
.after:after{content:'我在后面吧'; color:#F00;}
.before:before{content:'我在前面吧'; color:#F00;}
.block:after{content:'我是块元素,我占一行'; color:#F00; display:block;}
.block{display:block;}
</style>
<body>
<li class="li">after<span class="after">我是里面的内容</span></li>
<li class="li">before<span class="before">我是里面的内容</span></li>
<li class="lib">block<span class="block">我是里面的内容</span></li>
</body>
<style>
#li1 {
border: 1px solid #090;
padding: 10px;
font-size: 14px;
margin-bottom: 10px;
}
#li1:before{
content:"【";
color:#f00;
font-family:Arial;
}
#li1:after{
content:"】";
color:#f00;
font-family:Arial;
}
</style>
<li id="li1">插入内容</li>
<style>
li {
border: 1px solid #090;
padding: 10px;
font-size: 14px;
margin-bottom: 10px;
}
li:first-child:after{
content:url(new.gif);
margin-left:5px;
}
</style>
<li>插入内容</li>
<li>插入内容</li>
<li>插入内容</li>
<li>插入内容</li>
效果图
实例4
<style>
li {
border: 1px solid #090;
width:78px;
height:59px;
padding:3px;
position:relative;
}
li:after{
content:attr(id);
display:block;
color:#f00;
font-weight:bold;
position:absolute;
top:0;
right:0;
}
</style>
<li id="test" title="idtitle" style="width:78px;">文字内容</li>
效果图
实例5、
<style>
h1{
counter-increment:mycounter;
}
h1:before{
content:counter(mycounter);
}
</style>
<h1>大标题</h1>
<h1>大标题</h1>
<h1>大标题</h1>
效果图
实例6
<style>
h1{
counter-increment:mycounter;
}
h1:before{
content:"第"counter(mycounter,upper-roman)"章 ";
}
</style>
<h1>大标题</h1>
<h1>大标题</
标签:CSS
您可能感兴趣
- css代码大全登录界面(Div+CSS仿微信公众平台登录页面)
- css3边框讲解(六种css3实现的边框过渡效果)
- css中的margin属性(css布局之负margin妙用及其他实现)
- css中有几种样式表(深入浅出学习层叠样式表--css推荐)
- css3边框讲解(详解css3 object-fit属性)
- CSS3动画属性animation
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
- css line-height(CSS中的line-height行高属性学习教程)
- css设置背景图片在角落(详解使用CSS固定页面背景图片位置的方法)
- html和js代码结合(JS、CSS和HTML实现注册页面)
- css宫格布局(CSS实现页面九宫格布局的简单示范)
- 加载页面执行css动画效果(纯CSS实现预加载动画效果)
- css中width:auto和width:100%的区别
- CSS命名规范
- 三种css选择符(浅谈css之属性及剩余的选择符)
- css设置图片透明度
- 全椒人在苏州10周年联谊会在苏州举办(全椒人在苏州10周年联谊会在苏州举办)
- 这个全椒人被通报表彰,看看你认识吗(这个全椒人被通报表彰)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
- 董元奔吟咏历代文人 1012新旧均可 全椒人张璪 1022 -1093(董元奔吟咏历代文人)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
- 人从众 火炎焱 全椒再现 正月十六走太平 的魅力(人从众火炎焱全椒再现)
热门推荐
- typedef和var有什么不同(TypeScrip中泛型的案例详解)
- 用javascript设计五子棋(JavaScript实现网页版五子棋游戏)
- css3菜单特效(CSS3实现精美横向滚动菜单按钮)
- css中width:auto和width:100%的区别
- dedecms采集插件(dedecms 软件下载模块加入flashget快车下载代码)
- es6新增语法以及用法(ES6 解构赋值的原理及运用)
- python高德地图可视化(利用python和百度地图API实现数据地图标注的方法)
- pythonmatplotlib散点图怎么画(python使用matplotlib画柱状图、散点图)
- python符串操作教程(Python3.5运算符操作实例详解)
- css如何去掉本身的浮动元素(CSS清除浮动的常用方法优缺点分析)