摘要：最近在看張?chǎng)涡竦氖澜缈戳诉@個(gè)書(shū)感覺(jué)打開(kāi)了世界的大門建議前端工程師人手一本針對(duì)字符內(nèi)容生成這一技術(shù)用的最多的應(yīng)該就是配合實(shí)現(xiàn)字體圖標(biāo)了吧因?yàn)榫瓦\(yùn)用了這一技術(shù)進(jìn)入之后默認(rèn)是點(diǎn)擊紅線里面就是連接了可以直接打開(kāi)看到源碼與上面所寫無(wú)二在

最近在看張?chǎng)涡竦摹禼ss世界》, 看了這個(gè)書(shū)感覺(jué)打開(kāi)了css世界的大門. 建議前端工程師人手一本

針對(duì)content 字符內(nèi)容生成 這一技術(shù)用的最多的應(yīng)該就是配合@font-face實(shí)現(xiàn)字體圖標(biāo)了吧. 因?yàn)閔ttp://www.iconfont.cn 就運(yùn)用了這一技術(shù)

@font-face {
  font-family: "iconfont";  /* project id 243181 */
  src: url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot");
  src: url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot?#iefix") format("embedded-opentype"),
  url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.woff") format("woff"),
  url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.ttf") format("truetype"),
  url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.svg#iconfont") format("svg");
}
.icon-search:before {
  font-size: 24px; font-family: iconfont; content: "e657"; color: #000;
}

進(jìn)入iconfont之后默認(rèn)是Unicode 點(diǎn)擊Font class 紅線里面就是連接了, 可以直接打開(kāi)看到源碼. 與上面所寫無(wú)二.

在上面:before中content中的字符是Unicode, 由此延伸出下一個(gè)功能 動(dòng)態(tài)加載頁(yè)面內(nèi)容的時(shí)候時(shí)常用到"正在加載中..."這幾個(gè)字, 可以利用這一技術(shù)實(shí)現(xiàn)動(dòng)態(tài)...

html
正在加載中...

css
dot {
    display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden;
}
dot {
    display: block; content: "...a..a."; white-space: pre-wrap; animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em) }
    66% { transform: translateY(-1em) }
}

效果可以查看張?chǎng)涡癫┛筒榭? ie6~ie9是靜態(tài)的, 支持animation動(dòng)畫的瀏覽器都是動(dòng)態(tài)的.
動(dòng)畫原理為: 插入3行內(nèi)容是 3個(gè)點(diǎn)、2個(gè)點(diǎn)和一個(gè)點(diǎn), 然后通過(guò)transform控制垂直位置.
這里需要注意的有這么幾點(diǎn)

元素

為什么是::before, 而不是:before, 可不可以使用::after

從content屬性來(lái)看, 是3個(gè)點(diǎn)在第一行, 而1個(gè)點(diǎn)反而在最后一行, 為什么這么處理

這里white-space值為何是pre-wrap 而不是pre

對(duì)這幾個(gè)答案一一做回答:

是自定義的一個(gè)標(biāo)簽元素, 除了簡(jiǎn)約、語(yǔ)義化明顯外, 更重要的是方便向下兼容, ie8等低版本瀏覽器不認(rèn)識(shí)自定義的HTML標(biāo)簽, 就會(huì)顯示默認(rèn)的3個(gè)點(diǎn), 且對(duì)css代碼忽略.

:before是偽類, ::before則為偽元素. 偽元素使用::before 同時(shí)display設(shè)置為block, 是為了在現(xiàn)代瀏覽器下把原來(lái)的3個(gè)點(diǎn)推到最下面, 不會(huì)影響content的3行內(nèi)容顯示, 如果使用::after就很難實(shí)現(xiàn)效果

3個(gè)點(diǎn)在第一行是為了兼容ie9, 應(yīng)為ie9認(rèn)識(shí)以及::before, 但是不支持animation, 所以 為了ie9才把3個(gè)點(diǎn)放在第一行.

pre-wrap換成pre效果一樣.

content開(kāi)啟閉合符號(hào)生成
CSS中有個(gè)quotes屬性, 可以指定open-quote和close-quote字符具體是什么. 例如, 針對(duì)不同語(yǔ)言指定不同的前后符號(hào):

css世界是一本好書(shū)
css世界是一本好書(shū)
css世界是一本好書(shū)
/* 為不同語(yǔ)言指定引號(hào) */
:lang(ch) > q { quotes: """ """; }
:lang(en) > q { quotes: """ """; }
:lang(no) > q { quotes: "<" ">"; }

/* 在q標(biāo)簽的前后插入引號(hào) */
q:before { content: open-quote; }
q:after { content: close-quote; }

在此基礎(chǔ)上演變更多好玩的:

.ask {
    quotes: "提問(wèn): "" """;
}
.answer {
    quotes: "回答: "" """;
}
.ask:before,
.answer:before {
    content: open-quote;
}
.ask:after,
.answer:after {
    content: close-quote;
}

你問(wèn)我愛(ài)你有多深?
月亮代表我的心

content attr屬性值內(nèi)容生成
這個(gè)功能比較常用, 作者常用, 我也很常用.

img::after {
    /* 生成alt信息 */
    content: attr(alt); 
}

除了原生屬性, 自定義的HTML屬性也是可以的

.icon:before {
    content: attr(data-title);
}

需要注意的是, attribute中的屬性名不要加引號(hào)!