xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

# css3 

 

.类
:伪类
::伪元素

/*
                CSS3伪元素/伪类 ：https://www.w3.org/TR/css3-selectors/#selectors
                ::selection
                    伪元素(F12看不到，::selection 只是给E添加了css样式)
                ::aftet/:after ?
                    伪元素(F12看到，添加了新结点 ::after 结点)
                :first-child
                    伪类(.class)(F12看不到,只是给E添加了css样式 或 Jquery的js)
*/

 

/*
                CSS3伪元素/伪类 ：https://www.w3.org/TR/css3-selectors/#selectors
                ::selection
                    伪元素(F12看不到，::selection 只是给E添加了css样式)
                ::aftet/:after ?
                    伪元素(F12看到，添加了新结点 ::after 结点)
                :first-child
                    伪类(.class)(F12看不到,只是给E添加了css样式 或 Jquery的js)
*/

 

http://www.cnblogs.com/xgqfrms/p/5662310.html

1
1

1

1

1

1
在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通 过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的 “content”属性来实现。不过这个属性对于img和input元素不起作用。

content配合CSS的伪类或者伪元素，一般可以做以下四件事情：

功能

功能说明

none

不生成任何内容

attr

插入标签属性值

url

使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）

string

插入字符串

实例展示：

在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：

.clearfix:before,

.clearfix:after {

       content:””;

       display:table;

}

.clearfix:after {

       clear:both;

       overflow:hidden;

}

上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。

假设我们有一个元素：

<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {

  content:attr(title);

       color:#f00;

}

效果如下：

 

 

 

1

1

1

paperclip 回形针/别针

https://github.com/xgqfrms/js-module/tree/master/plugins/paperclip 

 

/*
	css: http://liujiacai.net/gooreplacer/
*/
header h1:before {
    content: "./ ";
    font-size: 24px;
    color: #0f0;
    background: #fff;
}

/*
https://developer.wordpress.org/resource/dashicons/#paperclip

paperclip: 回形针/曲别针/报纸夹纸夹/纸夹子 

Glyph :浮雕/象形文字 ()PS

<span class="dashicons dashicons-paperclip"></span>
*/
header h1:after {
    /*content: "回形针/别针icon";*/
    content: "\f546";
    font-size: 24px;
}

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>paperclip</title>
	<!-- <link rel="stylesheet" href="dashicons.css"> -->
	<link rel="stylesheet" href="https://wordpress.org/wp-includes/css/dashicons.css">
	<link rel="stylesheet" href="paperclip.css">
</head>
<body>
	<header>
		<h1>paperclip</h1>
	</header>
</body>
</html>

 

 

1

1

demo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>E::first-letter && text-transform: capitalize;</title>
	<!-- 
		text-transform: http://www.cnblogs.com/xgqfrms/p/5786191.html
		E::first-letter: http://www.cnblogs.com/xgqfrms/p/5662310.html
	-->
	<style>
	    html{
	    	font-size: 16px;
	    }
	    a{
	    	cursor: pointer;
	    	text-decoration: none;
	    }
	    div{
	    	border: 1px solid rgba(0,0,0,1);
	    	width: 50%;
	    	height: auto;
	    	margin: 0 auto;
	    }
	    .box{
	    	border: none;
	    	width: auto;
	    	height: auto;
	    }
	 	.d1 h1{
	 		text-transform: capitalize;
	 		color: rgba(0,0,0,0.7);
	 	}
	 	.d1 h1::first-letter{
	 		color: rgba(255,100,100,0.7);
	 	}
	 	.d2 h1::first-letter{
	 		color: #0f0;
	 		font-size: 2em;
	 	}
	 	.d3 h1::before{
	 		content: 'A';
	 		color: #f00;
	 		font-size: 3rem;
	 	}
	 	.d3 h2::after{
	 		content: 'B';
	 		color: #f0f;
	 		font-size: 1rem;
	 	}
	 	.d4 h1::first-line{
	 		color: #c3c;
	 	}
	 	.h1{
	 		font-size: 2em;
	 		font-weight: bold;
	 	}
	</style>
</head>
<body>
	<div class="box">
		<div class="d1">
			<h1><a href="#" title="text-transform: capitalize;"">text-transform</a></h1>
			<h1><a href="#" title="text-transform: capitalize;"">text_transform</a></h1>
			<h1><a href="#" title="text-transform: capitalize;"">text transform</a></h1>
		</div>
		<div class="d2">
			<h1><a href="#" title="E::first-letter"">abc</a></h1>
			<p class="h1"><a href="#" title="not E::first-letter"">abc</a></p>
		</div>
		<div class="d3">
			<h1><a href="#" title="E::before">*******</a></h1>
			<h2><a href="#" title="E::after">*******</a></h2>
		</div>
		<div class="d4">
			<h1>
				<p title="E::first-line">1111111</p>
				<p title="E::first-line">2222222</p>
				<p title="E::first-line">3333333</p>
			</h1>
		</div>
		<div class="d5">
			<h1 title="h1-title">title</h1>
			<img src="#" alt="image-alt" />
		</div>
	</div>
</body>
</html>

 

 

 

 

 

1

1

1

1

1

1

1

1

1

1

1

 

 

 

 

 

 

 
posted @ 2015-10-04 00:53  xgqfrms  阅读(345)  评论(2)  编辑  收藏  举报