CSS3選擇器 ::before和::after


:before:after偽元素的用法

:before:after偽元素的用法十分簡單;下面的代碼樣例中, :before 和 :after 將會在 blockquote 元素之前和之后插入新內容,它使用content屬性,也就是在內容上進行操作。

下面的代碼中一個引號標記將出現在blockquote元素的之前和之后。

blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } 

:before:after偽元素的CSS樣式

:before:after雖然是偽元素,但它們所有用法和行為表現和真正的元素幾乎完全一樣;我們可以對它們進行任何的CSS樣式設置,例如,改變它們的前景顏色,增加背景色/圖,調整字體大小,調整對齊方式等等。

blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; } blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: right; position: relative; bottom: 40px; } 

:before:after偽元素寬度和高度設置

:before:after偽元素在頁面中生成的元素在缺省情況下是“內聯(inline)”元素,如果我們想指定它們的高度和寬度,需要首先定義它們為一個block元素,使用display: block;

blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; border-radius: 25px; /** 定義成 block 元素 **/ display: block; height: 25px; width: 25px; } blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: right; position: relative; bottom: 40px; border-radius: 25px; /** 定義成 block 元素 **/ display: block; height: 25px; width: 25px; } 

:before:after偽元素添加背景圖/背景色

我們不僅可以設置content的文字內容,而且可以給它添加圖片和背景圖片。盡管content 屬性直接支持url()語法來插入一個圖片,但在大多數情況下,我們更常用的是使用background屬性來控制圖片的顯示。

blockquote:before { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: left; position: relative; top: 30px; border-radius: 25px; background: url(images/quotationmark.png) -3px -3px #ddd; display: block; height: 25px; width: 25px; } blockquote:after { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: right; position: relative; bottom: 40px; border-radius: 25px; background: url(images/quotationmark.png) -1px -32px #ddd; display: block; height: 25px; width: 25px; } 

然而,你也看到了,在上面的代碼片段中,我們仍然聲明了content屬性,並設置它的值為空字符串。這個content屬性,在這里是必須的,如果沒有它,這些偽元素將不能正常顯示。

:before:after偽元素和偽類(pseudo-classes)混合使用

盡管偽元素和偽類是不同的東西,但我們可以將它們在同一個CSS規則里混合使用,例如,如果你想要這樣的一個效果:當鼠標移動到blockquote元素上時,由偽元素生成的“引號”的顏色變深,下面的代碼就可以達到這樣的效果。

blockquote:hover:after, blockquote:hover:before { background-color: #555; }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM