: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; }