CSS伪元素使用详细说明及案例

CSS伪元素包含:
:first-line :为一段文字的第一行内容增加样式
:first-letter:将当前段第一个字增加样式
::before:内容或类中都可以使用,在内容使用 - 则内容前面出现伪元素定义的信息
::after:内容或类中都可以使用,在内容使用 - 则内容尾部出现伪元素定义的信息

下面我直接放上源码,源码中有详细说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	
    		/*以下为案例演示中IconFont 图标,引入的字体*/
    		@font-face 
    		{
    		font-family: "iconfont";
			  src: url('font/iconfont.eot?t=1488678038875'); /* IE9*/
			  src: url('font/iconfont.eot?t=1488678038875#iefix') format('embedded-opentype'), /* IE6-IE8 */
			  url('font/iconfont.woff?t=1488678038875') format('woff'), /* chrome, firefox */
			  url('font/iconfont.ttf?t=1488678038875') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			  url('font/iconfont.svg?t=1488678038875#iconfont') format('svg'); /* iOS 4.1- */
				}
				/*字体引入结束*/
				
    		.one
    		{
    			width:30%;
    			border:1px solid red;
    		}
    		
    		
    		
    		
    			/*伪元素说明开始*/
    		.one:first-line
    		{	
    			/*为一段文字的第一行内容增加样式*/
    			color:blue;
    		}
    		.one:first-letter
    		{
    			/*将当前段第一个字增加样式,下面代码中加入float:left;的作用是让文字环绕第一个字,否则的话则是第一个字在该行高出其它字;text-shadow增加阴影*/
    			color:#660099;
    			font-size:80px;
    			font-weight:bold;
    			padding: 20px;
    			text-shadow:2px 2px 2px #cc3399;
    			float:left;
    		}
    		
    		.two::before
    		{
    			content:"该内容出现在文章前面";
    		}
    		.two::after
    		{
    			content:"该内容出现在文章后面";	
    		}
    		/*伪元素结束*/
    		
    		
    		
    		
    		/*伪元素结合 IconFont 图标 案例*/
    		.box
    		{
    			width:400px;
    			height:50px;
    			color:gray;
    			border:1px solid blue;	
    			margin:100px auto;
    			
    			/*要想让IconFont 图标显示,则需要父框中声明这种字体*/
    			font-family:iconfont;
    			position:relative;
    		}
    		.box::before
    		{
    			content: "\e6a6";
    			
    			position:absolute;
    			right:5px;
    			top:22px;
    		}
    		/*伪元素结合 IconFont 图标 案例结束*/
    </style>
</head>

<body>
	<div class="one">
		将每年个人从搜索引擎搜索的内容,记录到修远兮
    数年后,你将发现一个可怖的宝藏
    想要在网络中记录各种知识的人群
    除中国网络环境要求不能存在的内容外,其它的一切都可以进行记录
    将每年个人从搜索引擎搜索的内容,记录到修远兮
    数年后,你将发现一个可怖的宝藏
    想要在网络中记录各种知识的人群
    除中国网络环境要求不能存在的内容外,其它的一切都可以进行记录
    将每年个人从搜索引擎搜索的内容,记录到修远兮
    数年后,你将发现一个可怖的宝藏
    想要在网络中记录各种知识的人群
    除中国网络环境要求不能存在的内容外,其它的一切都可以进行记录
		</div>
	<div class="two" style="padding-top:20px;">
		:当前内容前面会出现CSS中定义的文字,后面也会出现:	
	</div>
	
	<h3>下方是一个案例</h3>
	<h4>这个案例是在一个框中出现一个IconFont 图标 ,倒三角图标</h4>
	<div class="box">
		
	</div>
	
	
</body>
</html>
在文章中我们提到了IconFont 图标,想要了解的参考文章
http://www.xiuyuanxi.com/it/web/1488679308.html

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND