以前知道伪类和为元素,但是没有真正去研究过,今天我主要总结了一下伪元素中的::before 和 ::after 的一些用法,通过这两个为元素来认识一下其他的为元素!
一、什么是伪类,什么是为元素
① 伪类 伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来
伪类有: :first-child ,:link:,vistited,:hover:,:active,:focus,:lang,:right,:left,:first
② 伪元素 伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们,否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例如::before和:after能够访问产生的内容)。
伪类有: :first-line,:first-letter,:before,:after css3中为了区分伪类和为元素,经常在伪类前加双冒号(例如:::before 与 :before无差别)
二、伪元素 ::before 和 ::after
1.最基本效果
HTML:
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看我的效果</a>
css:
a::before{
content:"#";
}
a::after{
content:"@";
}
结果:
2. 清除浮动
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clear-fix {zoom: 1;}
.clear-fix:after{ display:table; content: ""; width: 0; clear: both; }
</style>
</head>
<body>
<div class="clear-fix">
<p class="pa">浮动元素</p>
</div>
</body>
</html>
3. 配合CSS3 产生特效 看过一个创意特效网站 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是这两个伪元素了 例如这种效果:
除了简单的添加字符,配合 CSS 强大的定位和特效特性,完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是,如果不需要内容仅配合样式属性做出效果,内容属性也不能为空,即 content:”" 。否则,其他的样式属性一概不会生效。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
a {
position: relative;
left:20px;
top:20px;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a::before{content: "";position:absolute;left:10px;transition:0.3s linear all;}
a::after{content: "";position:absolute;right:10px;transition:0.3s linear all;}
a:hover::before, a:hover::after { position: absolute; color:red;font-weight:bolder;}
a:hover::before { content: "\5B"; left: -15px; }
a:hover::after { content: "\5D"; right: -15px;}
</style>
</head>
<body>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看我的效果1</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看我的效果2</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看我的效果3</a>
</body>
</html>
好了,我总结的为元素就这么多,文章以后可以能会有些改动,也欢迎读者多加指点。