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