成長是一輩子的事兒！大家好！我是時問新。分享前端、Python等技術，以及個人成長路上的那些事兒。
CSS3增加了僞元素特性。
僞元素表示虛拟動态創建的元素。
僞元素用雙冒号表示。
::begore
::before創建一個僞元素，這個僞元素會成為選中的元素的第一個子元素。
注意：::before創建的僞元素，必須給它設置一個content屬性，content屬性表示這個僞元素的内容。
比如下面的代碼：
a元素後面跟了一個::before，
就表示在所有的a标簽裡面，都給它創建了一個僞元素，
創建的這個僞元素是a标簽的第一個子元素。
這個僞元素的屬性content，是一個五角星。
這樣，就會在頁面上每一個a标簽的内容最前面，加一個五角星。
::after
::after創建一個僞元素，這個僞元素會成為選中的元素的最後一個子元素。
同樣的：::after創建的僞元素，必須給它設置一個content屬性，content屬性表示這個僞元素的内容。
接下來我在vscode和浏覽器中演示一下::before和::after這兩個僞元素。我創建一個叫"僞元素.html"的文件，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>僞元素</title>
<style>
a::before {
/* 在a标簽本身的文字之前添加一個梅花 */
content: "♣";
}
a::after {
/* 在a标簽本身的文字之前添加一個心 */
content: "❤";
}
</style>
</head>
<body>
<p>
<a href="">去優酷網</a>
</p>
<p>
<a href="">去愛奇藝</a>
</p>
<p>
<a href="">去芒果TV</a>
</p>
</body>
</html>
我給a::before的屬性content設為一個梅花圖案，
表示在所有的a标簽的内容前面添加一個梅花圖案，
給a::after的屬性content設為一個心形圖案，
表示在所有的a标簽的内容後面添加一個心形圖案。
以上代碼在浏覽器中效果如下：
::selection
::selection創建一個僞元素，這個僞元素應用于文檔中被用戶高亮的部分(按住鼠标選中的部分)。
我繼續在"僞元素.html"這個文件中寫新的代碼，來演示::selection這個僞元素的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>僞元素</title>
<style>
a::before {
/* 在a标簽本身的文字之前添加一個梅花 */
content: "♣";
}
a::after {
/* 在a标簽本身的文字之前添加一個心 */
content: "❤";
}
.box1 {
width: 300px;
height:200px;
border: 1px solid black;
}
.box1::selection {
color: red;
background-color: gold;
}
</style>
</head>
<body>
<p>
<a href="">去優酷網</a>
</p>
<p>
<a href="">去愛奇藝</a>
</p>
<p>
<a href="">去芒果TV</a>
</p>
<div class="box1">
大江東去，浪淘盡，千古風流人物。故壘西邊，人道是，三國周郎赤壁。亂石穿空，驚濤拍岸，卷起千堆雪。江山如畫，一時多少豪傑。遙想公瑾當年，小喬初嫁了，雄姿英發。羽扇綸巾，談笑間，樯橹灰飛煙滅。故國神遊，多情應笑我，早生華發。人生如夢，一尊還酹江月。
</div>
</body>
</html>
我寫了一個類名叫box1的div，在這個div中寫了一段文字。給這個div設置了一個黑色邊框，寬度300像素，高度200像素。
在默認情況下，我們選中這個div中的文字時，會顯示藍色的背景和白色的文字，如下圖所示：
但是當我們給這個div添加了僞元素::selection時，我們就可以給這個僞元素設置新的樣式，比如我上面的代碼中，給它設置的樣式是：文字顔色紅色，背景顔色金色。
也就是說，此時當我們再選中這個div中的文字時，文字就變成了紅色，背景就變成了金色。
現在明白::selection這個僞元素是幹什麼的了吧！它就是用來設置用戶按住鼠标選中的内容的樣式的。
::first-letter和::first-line
::first-letter會選中元素(必須是塊級元素)中第一行的第一個字母。
::first-line會選中元素(必須是塊級元素)中第一行的全部文字。
關于塊級元素的概念，後面會學習到。
::first-letter和::first-line這兩個僞元素一般在英文網站中用的比較多，因為英文中經常會出現第一個字母大寫等現象，就需要這兩個僞元素來設置樣式。
我繼續在"僞元素.html"這個文件中寫新的代碼，來演示::first-letter和::first-line這兩個僞元素的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>僞元素</title>
<style>
a::before {
/* 在a标簽本身的文字之前添加一個梅花 */
content: "♣";
}
a::after {
/* 在a标簽本身的文字之前添加一個心 */
content: "❤";
}
.box1 {
width: 300px;
height:200px;
border: 1px solid black;
}
.box1::selection {
color: red;
background-color: gold;
}
.box1::first-line {
/* 在文字下面添加下劃線 */
text-decoration: underline;
}
.box1::first-letter {
font-size: 60px;
}
</style>
</head>
<body>
<p>
<a href="">去優酷網</a>
</p>
<p>
<a href="">去愛奇藝</a>
</p>
<p>
<a href="">去芒果TV</a>
</p>
<div class="box1">
大江東去，浪淘盡，千古風流人物。故壘西邊，人道是，三國周郎赤壁。亂石穿空，驚濤拍岸，卷起千堆雪。江山如畫，一時多少豪傑。遙想公瑾當年，小喬初嫁了，雄姿英發。羽扇綸巾，談笑間，樯橹灰飛煙滅。故國神遊，多情應笑我，早生華發。人生如夢，一尊還酹江月。
</div>
</body>
</html>
box1::first-line這個僞元素，就是選中box1這個div中的第一行文字，我這裡給它添加的屬性是：text-decoration：underline;
還記得text-decoration這個屬性嗎？就是文字裝飾的意思，underline，就是下劃線的意思。
box1::first-letter這個僞元素，就是選中box1這個div中的第一行的第一個字母。我這裡給它的屬性是：font-size：60px；即文字尺寸設為60像素。
當我們沒有給頁面的文字設置字體大小時，浏覽器會以默認的大小顯示文字，這裡我給第一個字母設置為60像素，明顯就比默認要大很多。
以上代碼在浏覽器中顯示效果如下：
以上就是常見的僞元素。
感謝閱讀！知識總結不易，請點個贊或轉發鼓勵一下呗！想系統性學習前端的小夥伴可以關注我！
溫馨提示：我在頭條關于前端的圖文，都是成體系的，如果是沒接觸過前端，對前端感興趣、想要學習前端的小夥伴，要按順序從第一節去看，更重要的是要動手實踐。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
