css偽元素有哪些？ css偽元素的詳情介紹(內附實例)-css教學-PHP中文網

首頁

web前端

css教學

css偽元素有哪些？ css偽元素的詳情介紹(內附實例)

寻∝梦

Sep 08, 2018 pm 01:43 PM

css 偽元素

今天這篇文章主要的介紹了四種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偽元素有哪些？ css偽元素的詳情介紹(內附實例)

這是一段很正常的文本，接下來我們來插入css樣式的偽元素看看效果：

##在head裡面加入css樣式：

<style type="text/css">
p:before{content: "这里是PHP中文网"}
</style>

登入後複製

這樣結果就出來了，p標籤裡面的文字還是那些文字，看看在瀏覽器中顯示的效果：

css偽元素有哪些？ css偽元素的詳情介紹(內附實例)

效果是不是很明顯，在before裡面的文字是不是到了p標籤的前面去了。

說了第一個before偽元素，現在說說第二個偽元素：

:after：在元素的後面加入內容，也很簡單吧，把上個程式碼裡面的before換成after就行了。

我們來看看程式碼：

<title>PHP中文网</title>
<style type="text/css">
p:after{content: "这里是PHP中文网"}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话</P>
</body>

登入後複製

好了，程式碼出來了，大家一起來看看在瀏覽器中顯示的效果是不是跟上面說的一樣吧：

css偽元素有哪些？ css偽元素的詳情介紹(內附實例)

跟上面說的完全一樣，就是在後面加入了內容，看的很明顯吧。

現在來說說第三個偽元素的用法：

:first-line：設定了第一行的變化，第二行就不變了。

我們來進個實例：

<title>PHP中文网</title>
<style type="text/css">
p:first-line{color:red}
</style>
</head>
<body>
<P>我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话；我是一个段落，这一段只有我这一句话</P>
</body>

登入後複製

因為是要首行顯示，所以我把文字複製了幾份，我們來看看瀏覽器顯示的效果：

css偽元素有哪些？ css偽元素的詳情介紹(內附實例)

是不是第一行全變了，第二三行都沒變，這樣就容易讓大家知道這些偽元素的用法了。（想看更多就到PHP中文網

CSS學習手冊中學習）

最後一個是:first-letter偽元素：

:first-letter：是定義文本第一個字母的變化。

我們把上文的文字第一句變成英文，現在來看看程式碼：

<style type="text/css">
p:first-letter{color:red}
</style>

登入後複製

看效果圖：

css偽元素有哪些？ css偽元素的詳情介紹(內附實例)

#文本的第一個字母變了，這樣是不是就成功了，一般我們都是用它來做放大之類的效果。

以上就是這篇關於css樣式偽元素的全部了。介紹了四個常用的偽元素，希望能幫助大家（想學更多css樣式知識就到PHP中文網

css學習手冊欄位中學習）。有問題的可以在下方留言提問。

【小編推薦】

css表格怎麼加入邊框樣式？ css表格邊框樣式總結（附完整實例）

HTML a標籤如何讓滑鼠懸停變色，css控制a標籤滑鼠懸停樣式詳解
#

以上是css偽元素有哪些？ css偽元素的詳情介紹(內附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7538

CakePHP 教程

1380

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。