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)
*/ 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;
} 效果如下：
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> 
CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
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: javascript:void(0)
-->
<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> CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
xgqfrms