顧名思義,偽元素就是你的文檔中若有實無的元素。
::first-letter偽元素
格式:
CSS Code復制內容到剪貼板
e::first-letter
示例:
CSS Code復制內容到剪貼板
p::first-letter {font-size:300%;}
提示:如果不用偽元素創建這個首字符放大效果,必須手工給該字母加上標簽,
然后再為該標簽應用樣式。而偽元素實際上是替我們添加了無形的標簽。
::first-line偽元素
格式:
CSS Code復制內容到剪貼板
e::first-line
示例:
CSS Code復制內容到剪貼板
p::first-line {font-variant:small-caps;}
說明:選中文本段落(一般情況下是段落)的第一行。
::before和::after偽元素
格式:
CSS Code復制內容到剪貼板
e::before
e::after
示例:
對標記:
CSS Code復制內容到剪貼板
<p class="age">25</p>
添加如下樣式:
CSS Code復制內容到剪貼板
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
會得到如下結果:
復制代碼代碼如下:Age: 25 years.
提示:如果標簽中的內容是通過數據庫查詢生成的結果,那么用這種技巧再合適不過了。
因為所有結果都是數字,使用這兩個偽元素可以在把數字呈現給用戶時,加上說明
性文字。
新聞熱點
疑難解答