二，前端---偽類與偽元素的用法
阿新 • • 發佈：2017-07-08
eat png color 用法 方便 style one 渲染 邏輯
1：清除浮動
.clear-fix{
*overflow: hidden;
*zoom: 1
}
.clear-fix:after{
display: table;
content: "";
width: 0;
clear: both
}
三：案例
<head lang="en">
<meta charset="UTF-8">
<title>偽元素</title>
<style>
#show{
background: wheat;
width: 650px;
height: 400px;
margin: 100px auto;
text-align: center;
}
p{
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #df5000;
font-size: 90px;
padding: 5px 10px;
}
p:hover::before,p:hover::after {
position: absolute;
}
p:hover::before {
content: "\5B"; left: -20px;
}
p:hover::after {
content: "\5D"; right: -20px;
}
</style>
</head>
<body>
<div id = "show"><p>nnjnmljkljklj</p></div>
</body>
一：基本用法
::before和::after這兩個偽類下有特有的屬性content，用於在CSS渲染中向元素邏輯上的頭部或尾部添加內容。這些內容不會改變文檔的內容，不會出現在DOM中，不可復制，僅僅是在CSS渲染層加入。
1：[String] 使用引號包括一段字符串，將會向元素內容中添加字符串，如：a:after{content: ‘ / ‘}
2：attr() 調用當前元素的屬性，可以方便的比如將圖片的Alt提示文字或鏈接的Href地址顯示出來，如下：
a:after {
content: "(" attr(href) ")";
}
3：url() / uri() 用於引入媒體文件
h1:before{
content: url(log.png);
}
4：counter() 調用計數器，可以不使用列表元素實現序號功能。
h2:before{
counter-increment: chapter;
content: "Chapter" counter(chapter) ". "
}
二：進階技巧
1：清除浮動
.clear-fix{
*overflow: hidden;
*zoom: 1
}
.clear-fix:after{
display: table;
content: "";
width: 0;
clear: both
}
三：案例
<head lang="en">
<meta charset="UTF-8">
<title>偽元素</title>
<style>
#show{
background: wheat;
width: 650px;
height: 400px;
margin: 100px auto;
text-align: center;
}
p{
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #df5000;
font-size: 90px;
padding: 5px 10px;
}
p:hover::before,p:hover::after {
position: absolute;
}
p:hover::before {
content: "\5B"; left: -20px;
}
p:hover::after {
content: "\5D"; right: -20px;
}
</style>
</head>
<body>
<div id = "show"><p>nnjnmljkljklj</p></div>
</body>
各位***猿可以通過運行案例代碼來看出效果，如果有不足之處，希望大家指出寶貴經驗，謝謝！！！
二，前端---偽類與偽元素的用法