css偽元素有哪些？ css偽元素的詳情介紹(內附實例)
- 寻∝梦原創
- 2018-09-08 13:43:1010801瀏覽
今天這篇文章主要的介紹了四種CSS樣式的偽元素，講解的css偽元素都是在日常中比較常見的，現在就讓我們一起來看這篇文章吧。
首先我們先來看看本文介紹的css樣式中的四個偽元素：
:before這個偽元素定義在元素之前加入內容
:after 此偽元素定義在元素之後加入內容
:first-line 該偽元素在文字的首行中加入特殊樣式
:first-letter 此偽元素會在文字的第一個字母中加入特殊樣式
這四種偽元素都是在平常寫程式碼的時候比較常用的元素。
現在我們來看第一個：
:before，該元素是在元素之前加入內容的。
我們來看個完整的實例了解一下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <P>我是一个段落，这一段只有我这一句话</P> </body> </html>
這是一個普通的文本文檔，顯示的也是正常的，先看看圖，然後在對比：
這是一段很正常的文本，接下來我們來插入css樣式的偽元素看看效果：
##在head裡面加入css樣式：
<style type="text/css">
p:before{content: "这里是PHP中文网"}
</style>這樣結果就出來了，p標籤裡面的文字還是那些文字，看看在瀏覽器中顯示的效果： "153636975263445css偽元素有哪些？ css偽元素的詳情介紹(內附實例)")
說了第一個before偽元素，現在說說第二個偽元素：
:after：在元素的後面加入內容，也很簡單吧，把上個程式碼裡面的before換成after就行了。 我們來看看程式碼：<title>PHP中文网</title>
<style type="text/css">
p:after{content: "这里是PHP中文网"}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>好了，程式碼出來了，大家一起來看看在瀏覽器中顯示的效果是不是跟上面說的一樣吧：
現在來說說第三個偽元素的用法：
:first-line：設定了第一行的變化，第二行就不變了。 我們來進個實例：<title>PHP中文网</title>
<style type="text/css">
p:first-line{color:red}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话</P>
</body>因為是要首行顯示，所以我把文字複製了幾份，我們來看看瀏覽器顯示的效果：
CSS學習手冊中學習）
最後一個是:first-letter偽元素：:first-letter：是定義文本第一個字母的變化。 我們把上文的文字第一句變成英文，現在來看看程式碼：<style type="text/css">
p:first-letter{color:red}
</style>看效果圖：
css學習手冊欄位中學習）。有問題的可以在下方留言提問。
【小編推薦】css表格怎麼加入邊框樣式？ css表格邊框樣式總結（附完整實例）
HTML a標籤如何讓滑鼠懸停變色，css控制a標籤滑鼠懸停樣式詳解
#
以上是css偽元素有哪些？ css偽元素的詳情介紹(內附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS怎麼設定垂直居中？下一篇：CSS怎麼設定垂直居中？