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

來源:互聯網
上載者:User
本篇文章將要給大家詳細介紹css中虛擬元素:before和:after的具體使用方法。有的新手小白們可能乍一看,覺得是個熟悉的單詞,但是在css中出現就有點迷茫。我們都知道css功能是非常強大的。就是因為css的功能才能使得網頁如此豐富多彩。

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

  1. 一段帶有: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>

那麼上述代碼效果如:


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>

代碼效果如:


那麼我們通過上述1和2 的樣本中,是否得出一些關於css before和after偽類使用方法的結論呢?其實正如before和after的中文翻譯差不多,在...之前和在...之後。

在css中,:before虛擬元素的用處就是可以在元素的內容之前插入新的內容,如樣本1中,我們使用:before元素給h1這個大標題的前面加了一張圖片。

而:after虛擬元素的用處就是可以在元素的內容之後插入新的內容,如樣本2中,我們使用:after元素給h1這個大標題的後面添加了一張圖片。

其實before和after虛擬元素也可以說是真正的元素,雖然虛擬元素不能體現在文檔樹裡面,但是我們仍然可以給他們加任何樣式,而且所加樣式可以和普通頁面元素一樣!

那麼本篇關於css :before和:after虛擬元素的介紹就到這裡,希望對大家有所協助。更多css知識可以觀看【css視頻教程】或者【css手冊】

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。