摘要：最近在看張鑫旭的世界看了這個書感覺打開了世界的大門建議前端工程師人手一本針對字符內容生成這一技術用的最多的應該就是配合實現字體圖標了吧因為就運用了這一技術進入之后默認是點擊紅線里面就是連接了可以直接打開看到源碼與上面所寫無二在

最近在看張鑫旭的《css世界》, 看了這個書感覺打開了css世界的大門. 建議前端工程師人手一本

針對content 字符內容生成 這一技術用的最多的應該就是配合@font-face實現字體圖標了吧. 因為http://www.iconfont.cn 就運用了這一技術

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

進入iconfont之后默認是Unicode 點擊Font class 紅線里面就是連接了, 可以直接打開看到源碼. 與上面所寫無二.

在上面:before中content中的字符是Unicode, 由此延伸出下一個功能 動態加載頁面內容的時候時常用到"正在加載中..."這幾個字, 可以利用這一技術實現動態...

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) }
}

效果可以查看張鑫旭博客查看, ie6~ie9是靜態的, 支持animation動畫的瀏覽器都是動態的.
動畫原理為: 插入3行內容是 3個點、2個點和一個點, 然后通過transform控制垂直位置.
這里需要注意的有這么幾點

元素

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

從content屬性來看, 是3個點在第一行, 而1個點反而在最后一行, 為什么這么處理

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

對這幾個答案一一做回答:

是自定義的一個標簽元素, 除了簡約、語義化明顯外, 更重要的是方便向下兼容, ie8等低版本瀏覽器不認識自定義的HTML標簽, 就會顯示默認的3個點, 且對css代碼忽略.

:before是偽類, ::before則為偽元素. 偽元素使用::before 同時display設置為block, 是為了在現代瀏覽器下把原來的3個點推到最下面, 不會影響content的3行內容顯示, 如果使用::after就很難實現效果

3個點在第一行是為了兼容ie9, 應為ie9認識以及::before, 但是不支持animation, 所以 為了ie9才把3個點放在第一行.

pre-wrap換成pre效果一樣.

content開啟閉合符號生成
CSS中有個quotes屬性, 可以指定open-quote和close-quote字符具體是什么. 例如, 針對不同語言指定不同的前后符號:

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

/* 在q標簽的前后插入引號 */
q:before { content: open-quote; }
q:after { content: close-quote; }

在此基礎上演變更多好玩的:

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

你問我愛你有多深?
月亮代表我的心

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

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

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

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

需要注意的是, attribute中的屬性名不要加引號!