CSS3 擬元素(Pseudo-elements) | Selector

其表達方式不同於 CSS2.1,它需要用兩個冒號(colon) :: 來表示。

::擬元素的名稱

::first-line

適用於區塊層級(Block-Level)元素的第一列。

p::first-letter {				/* 例如我們做這樣的設定時 */
	color: blue;
}

::first-letter

適用於區塊層級(Block-Level)元素的第一個字。

p::first-letter {				/* 例如我們做這樣的設定時 */
	float: left;
	color: blue;
	font-size: 50px;
	font-weight: bold;
}

::selection

表示經由瀏覽者強調之後的部分文件內容。例如我們在網頁上選取一些文字時(反白),通常其表現出來的就是藍底白字。

p::selection {					/* 例如我們做這樣的設定時 */
	background-color: yellow;
	color: red;
}

::after

用來和 content 樣式一起使用,設定在目標內容產生之後。

p::after {					/* 例如我們做這樣的設定時 */
	content: "我在後面!";
	color: red;
}

::before

用來和 content 樣式一起使用,設定在目標內容產生之前。

p::before {					/* 例如我們做這樣的設定時 */
	content: "我在前面!";
	color: red;
}

文章分類

文章標籤