CSS中的偽元素簡(jiǎn)介
segmentfault 發(fā)布時(shí)間：2015-08-01 19:08:57 作者：dopppler 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS中的偽元素,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
顧名思義，偽元素就是你的文檔中若有實(shí)無的元素。
::first-letter偽元素
格式：
CSS Code復(fù)制內(nèi)容到剪貼板
- e::first-letter
示例：
CSS Code復(fù)制內(nèi)容到剪貼板
- p::first-letter {font-size:300%;}
提示：如果不用偽元素創(chuàng)建這個(gè)首字符放大效果，必須手工給該字母加上標(biāo)簽，
然后再為該標(biāo)簽應(yīng)用樣式。而偽元素實(shí)際上是替我們添加了無形的標(biāo)簽。
::first-line偽元素
格式：
CSS Code復(fù)制內(nèi)容到剪貼板
- e::first-line
示例：
CSS Code復(fù)制內(nèi)容到剪貼板
- p::first-line {font-variant:small-caps;}
說明：選中文本段落（一般情況下是段落）的第一行。
::before和::after偽元素
格式：
CSS Code復(fù)制內(nèi)容到剪貼板
- e::before
- e::after
示例：
對(duì)標(biāo)記：
CSS Code復(fù)制內(nèi)容到剪貼板
- <p class="age">25</p>
添加如下樣式：
CSS Code復(fù)制內(nèi)容到剪貼板
- p.age::before {content:"Age: ";}
- p.age::after {content:" years.";}
會(huì)得到如下結(jié)果：
復(fù)制代碼
代碼如下:Age: 25 years.
提示：如果標(biāo)簽中的內(nèi)容是通過數(shù)據(jù)庫(kù)查詢生成的結(jié)果，那么用這種技巧再合適不過了。
因?yàn)樗薪Y(jié)果都是數(shù)字，使用這兩個(gè)偽元素可以在把數(shù)字呈現(xiàn)給用戶時(shí)，加上說明
性文字。
相關(guān)文章
通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧簡(jiǎn)介
這篇文章主要介紹了通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧,包括用object-fit來居中并裁剪圖片的方法,需要的朋友可以參考下2016-02-27CSS計(jì)數(shù)器counter()的用法簡(jiǎn)介
這篇文章主要介紹了CSS計(jì)數(shù)器counter()的用法,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-09-26- 這篇文章主要介紹了CSS中的各種選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-17
- 這篇文章主要介紹了Markdown.css樣式,用來實(shí)現(xiàn)顯示強(qiáng)大的Markdown樣式的文本,需要的朋友可以參考下2015-07-16
- CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局2014-05-03
定義css設(shè)備類型-Media Queries圖表簡(jiǎn)介及使用方法
CSS3完美地解決了讓同一個(gè)網(wǎng)站同時(shí)適應(yīng)完全不同尺寸的屏幕這些問題;css3提出的MediaQueries解決了為網(wǎng)站設(shè)計(jì)不同的CSS樣式文件，如打印樣式表文件，手機(jī)樣式文件，電腦樣式2013-01-21css3背景圖片透明疊加屬性cross-fade簡(jiǎn)介及用法實(shí)例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個(gè)CSS3屬性，一個(gè)是CSS3 filters – CSS3濾鏡另外一個(gè)是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08- 本文主要介紹了通用的css hack2012-07-11
網(wǎng)頁設(shè)計(jì)中的CSS Sprites技術(shù)介紹及其優(yōu)化方法
CSS Sprites 技術(shù)對(duì)于廣大的前端工程師來說應(yīng)該是一點(diǎn)也不陌生。這個(gè)被國(guó)內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題，我們又怎樣合理使用這個(gè)技術(shù)呢?下面讓我2012-05-31- 國(guó)外人士非常重視網(wǎng)站的易用性，相當(dāng)一部分外國(guó)站點(diǎn)已經(jīng)使用em作為字體單位.2009-12-27