before,after偽類元素一點感觸，以及利用border邊框製作小圖形
阿新 • • 發佈：2019-01-06
顧名思義，before，after是往某個標籤前部，後部插“值”的。且這“值”可以是文字，圖片，連結，border圖形，圖示，清除浮動after（較為常用clear屬性以最老無包裹屬性父類為邊界）等…。且before和after必須要有個屬性值content，否則他們就罷工了。此外要注意這兩個傢伙預設是內聯元素（也稱行內元素）簡單描述
用法：
文字`
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test_words</title> <style> *{ margin: 0px; padding: 0px; } .example{ margin: 100px auto; height: 200px; width: 200px; text-align: center; border: 2px solid chocolate; box-shadow: 10px 10px 10px #000000; } .test1::before{ color: red; content: "哈哈哈"; } .test2::after{ color: red; content: "菜鳥"; } </style> </head> <body> <div class="example"> <div class="test1">我是菜鳥</div> <div class="test2">哈哈哈我是</div> </div> </body> </html>
`截圖：
圖片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test_image</title> <style> ul li::before{ height: 30px; width: 30px; display:inline-block; content: url(img/timg.jpg); } </style> </head> <body> <div> <ul> <li>This is a test1!</li> <li>This is a test2!</li> </ul> </div> </body> </html>
``
截圖：
注意：其content內容尺寸不可改變（將before，after改變為塊級元素也無效），為此我們可以將圖片設定為background來進行尺寸控制
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test_image</title> <style> li{ list-style: none; } ul li::before{ position: relative; top: 10px; height: 30px; width: 30px; content: ""; display: inline-block; background: url(img/timg.jpg) no-repeat; background-size: 100%; } </style> </head> <body> <div> <ul> <li>This is a test1!</li> <li>This is a test2!</li> </ul> </div> </body> </html>
截圖：
border圖形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test_border-shape</title>
<style>
.wifi{
margin: 7% 6.75%;
height: 10px;
width: 10px;
background-color: darkgray;
border-radius: 100%;
}
.wifi::before,
.wifi::after{
position: absolute;/* 強制改為塊級元素,也可使用display來改變為塊級元素 */
content: "";
border-width: 10px;
border-style: solid;
border-radius: 100%;
border-color: darkgray transparent transparent transparent;
}
.wifi::before{
top: 50px;
left: 50px;
height: 50px;
width: 90px;
}
.wifi::after{
top: 70px;
left: 65px;
height: 30px;
width: 60px;
}
</style>
</head>
<body>
<div class="wifi"></div><label>This is a test!</label>
</body>
</html>
截圖
在這裡推薦一個border網站給大家：http://fontello.com/小圖示製作案例
；https://css-tricks.com/很不錯的一個前端學習網站。
attract（）用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test_attr</title>
<style>
li{
list-style: none;
}
ul li::before{
content:attr(id);
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li id="1">This is a test1!</li>
<li id="2">This is a test2!</li>
<li user_id="3">This is a test3!</li><!-- 因為它的屬性名不為id，所以沒有出來 -->
</ul>
</div>
</body>
</html>
截圖
未清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_clearfix</title>
<style>
.example{
padding: 30px;
background: darkgray;
}
img{
float: left;
height: 100px;
width: 100px;
}
.example::after{
clear: both;
content: "";
}
</style>
</head>
<body>
<div class="example">
<img src="img/timg.jpg" />
</div>
</body>
</html> ``
截圖
一般不含包裹屬性（例如position:absolute; display:inline-block; float:left; overflow:hidden）的div內部有浮動元素的話，那麼這個浮動元素會讓此div的高度塌陷。
清除程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_clearfix</title>
<style>
.example{
padding: 10px;
background: darkgray;
}
img{
float: left;
height: 100px;
width: 100px;
}
.example::after{
clear: both;
content: "clear";/* 清除浮動 */
visibility: hidden;/* 隱藏content內容 */
overflow: hidden;/* 偽類部分超出隱藏 */
display: block; /* 改為塊級元素 */
}
</style>
</head>
<body>
<div class="example">
<img src="img/timg.jpg" />
</div>
</body>
</html>
截圖：
總的來說，偽類元素（對單標籤無效）是個比較“偷懶‘的東西，挺實用的！！！