css before after什麼意思？【用法詳解】-css教學-PHP中文網

css before after什麼意思？【用法詳解】

藏色散人

發布： 2018-09-07 15:36:37

原創

5777 人瀏覽過

本篇文章將要向大家詳細介紹css中偽元素：before和：after的具體使用方法。有的新手小白們可能乍一看，覺得是個熟悉的單字，但在css中出現就有點迷惘。我們都知道css功能是非常強大的。就是因為css的功能才能使得網頁如此豐富多彩。

首先css偽元素是用來為某些選擇器新增特殊的效果。我們在製作網頁中，一些特殊的動畫效果都是離不開css偽元素的。當然css偽元素是有多種的，偽元素所控制的內容和一個元素控制的內容一樣，但是偽元素是不存在於文檔樹中，不是真正的元素，所以叫偽元素。下面我們就透過具體的程式碼範例，給大家詳細介紹css中:before和:after偽類的用法。

一段帶有:before偽元素樣式的HTML程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1:before {content:url(/test/img/2.png)}
    </style>
</head>
<body>
<h1>这里是一段大标题</h1>
<p>css before伪元素使用代码示例</p>
</body>
</html>

登入後複製

那麼上述程式碼效果如下圖：

css before after什麼意思？【用法詳解】

2.一段帶有:after偽元素樣式的HTML程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1:after {content:url(/test/img/2.png)}
    </style>
</head>
<body>
<h1>这里是一段大标题</h1>
<p>css :after伪元素使用代码示例</p>
</body>
</html>

登入後複製

程式碼效果如下圖：

css before after什麼意思？【用法詳解】