css伪元素用法大全
本文主要讲解css伪元素的用法，有需要的朋友可以阅读此文。本文讲解的伪元素有：before,after.
什么是伪元素（Pseudo element）？
伪元素不是真正的元素，不存在与文档之中，所以js无法操作他。那为什么叫他“元素”？因为我们可以对其进行跟元素几乎无差别的操作。
伪元素有哪些？
before,after,first-letter,first-line。
我们为什么需要伪元素？
伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）——百度百科。
怎样表示伪元素?最好使用双冒号，防止与伪类混淆。
hey::before{
}
hey::after{
}
before与after的用法总结
before定位的基准是其主元素的右上角，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常工作，属性为inline元素，若需要设置高宽度等属性需要display：block;。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
border:1px red solid;
}
p:before{content: "hey ";
position: relative;
left: 20px;}
p:after{content: "you are handsome!";
position: relative；
left:20px;
}
</style>
</head>
<body>
<p>安静!</p>
</body>
</html>
content是伪元素必需的属性，其内容可以分为几类：字符串/attr/url/counter(计算器)。若伪元素没有内容，需赋值为空格：content:' ';
<h2></h2>
<h2></h2>
<style>
body {counter-reset:section;}
h2:before {
counter-increment: section;
content: "Chapter" counter(section) ".";
}
</style>
before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。一般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
更多效果点这里：这里这里
对checkbox/radio美化：
.magic-checkbox {
position: absolute;
display: none; //先隐藏真正的checkboxbox
}
.magic-checkbox + label {//为与checkbox搭配的label使用样式
position: relative; //相对定位，方便其内容的伪元素进行定位
display: block; //块元素
padding-left: 30px;
cursor: pointer;
vertical-align: middle;
}
.magic-checkbox + label:before { //label添加:before伪元素，用于生成一个带边界的正方形，模拟复选框的轮廓
position: absolute;
top:;
left:;
display: inline-block;
width: 20px;
height: 20px;
content: '';
border: 1px solid #c0c0c0;
border-radius: 3px;
}
//为checkbox添加:after伪元素，作用是生成一个√图形，模拟checkbox选中状态，未选中状态下会被隐藏
.magic-checkbox + label:after {
top: 2px;
left: 7px;
box-sizing: border-box;
width: 6px; //实现√图形很简单：设置一个长方形，去掉其上边界和左边界，剩下的2个边界旋转45度就得到√形状
height: 12px;
transform: rotate(45deg);
border-width: 2px;
border-style: solid;
border-color: #fff;
border-top:;
border-left:;
position: absolute;
display: none; //√形状先隐藏
content: '';
}
//单击label，隐藏的checkbox为checked状态，这时设置checked状态下搭配label的:before伪元素背景和边界颜色
.magic-checkbox:checked + label:before {
animation-name: none;
border: #3e97eb;
background: #3e97eb;
}
//checked状态的checkbox搭配的label伪元素:after此时设置显示，那么√就显示出来了
.magic-checkbox:checked + label:after {
display: block;
}
实际效果点击：这里这里
利用:after属性还可以对主元素进行批注：
.empty__bg {
display: inline-block;
width: 95px;
height: 92px;
background: url(http://7tszky.com1.z0.glb.clouddn.com/FvD_sYY4Fmp_yKS0E07H-5jhuKTB) no-repeat;
background-size: 95px 92px;
position: relative;
margin-bottom: 16px;/*注意这里需要留好位置放置after元素（它是absolute进去的）*/
}
.empty__bg:after {
content: "暂无学习计划";
display: block;
font-size: 14px;
line-height: 24px;
text-align: center;
width: 100%;
color: #909090;
position: absolute;
top: 100%;
left:;
}
}
参考文章：
如需转载请注明文章出处：http://www.cnblogs.com/lflj/
css伪元素用法大全的更多相关文章
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- css伪元素:before和:after用法详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...
- CSS——你所不知的 CSS ::before 和 ::after 伪元素用法（转）
你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...
- CSS伪元素before、after妙用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 学习CSS之如何改变CSS伪元素的样式
一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下: selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 ...
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- css 伪元素分享！！！
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- (六)CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...
随机推荐
- 微信小程序之----navigator页面跳转
navigator navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面,另一种不带即在本页跳转,通过控制redirect属性 .js <view> <navi ...
- sql server 2008 学习笔记
sql server 2008 删除已有的实例 想从setup.exe中区卸载,没找到. 原来还是要从控制面板中卸载,卸载Microsoft SQL Server 2008 卸载界面会提示让你选择要删 ...
- java和Ajax
原博(实在太啰嗦了):https://netbeans.org/kb/docs/web/ajax-quickstart_zh_CN.html 1.Ajax的基本原理 Ajax 代表异步 JavaScr ...
- java系列--集合
==比较地址,equals比较内容 一.常用集合框架: 1.List结构集合类:ArrayList类: LinkedList类:addFirst( ),addLast( ),remove( ), Ve ...
- linux 安装jdk及tomcat指定jdk版本推荐
方法1:用yum命令安装 1. 查看当前jdk版本:Java –version,或者是:rpm -qa | grep jdk 2. 删除当前jdk:yum -y remove java-1.6 ...
- eclipse中集成svn maven开发手册---合并主干
如图,代码提交分支之后 右键,项目,切换到主干版本 切换回主干版本后: 更新主干版本 合并 选择merge a range of revisions,点击next 录入要合并的分支版本的路径.此处的s ...
- Android 使用AsyncTask 下载图片的例子,学会使用AsyncTask
1.添加布局文件:activity_main.xml 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res ...
- Win10 的虛擬桌面
Win10 的虛擬桌面我覺得蠻多餘的,平常很少用,除非是像以前的 "切換老闆鍵" ,老闆來了,你不想讓他知道你在幹嘛,趕快切換另外一個桌面. 切換工作視窗:Alt + Tab 叫出 ...
- 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景（五）
[前言和思路整理] 千呼万唤Shǐ出来!终于到最后一章啦~ 很抱歉这一章卡了那么久才发布.主要原因是家里电脑主板的内存插槽炸了,返厂后这周才收到,平时在公司也基本没什么时间写……再次表示歉意. 上一章 ...
- systemd的命令systemctl set-property testSpeed CPUQuota=10%
总结 systemd 的资源限制一般要写到unit文件中,但是,现在测试发现会有 被值被覆盖的现象:经过排查发现是,没有 使用systemd的接口,凡是使用echo "" > ...