利用css設置半個文字的樣式代碼實例:通常情況下，設置文字的樣式，效果都是作用域整個文字的，比如設置它的顏色，那麼整個文字都會變色，下麵介紹一下如何給文字的一部分設置指定的樣式，希望能夠給需要的朋友帶來一定的幫助。代碼如下:螞蟻部落soft 上面的代碼實現了我們的要求，字元串中的文字只有一半被設置為...
利用css設置半個文字的樣式代碼實例:
通常情況下，設置文字的樣式，效果都是作用域整個文字的，比如設置它的顏色，那麼整個文字都會變色，下麵介紹一下如何給文字的一部分設置指定的樣式，希望能夠給需要的朋友帶來一定的幫助。
代碼如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .antzone{ position:relative; display:inline-block; font-size:80px; color:black; overflow:hidden; white-space:pre; } .antzone:before{ display:block; z-index:1; position:absolute; top:0; left:0; width:50%; content:attr(data-content); overflow:hidden; color:#f00; } </style> </head> <body> <span class="antzone" data-content="s">s</span> <span class="antzone" data-content="o">o</span> <span class="antzone" data-content="f">f</span> <span class="antzone" data-content="t">t</span> </body> </html>
上面的代碼實現了我們的要求，字元串中的文字只有一半被設置為紅色，下麵簡單介紹一下它的實現原理。
一.實現原理:
效果看起來很炫，其實原理非常的簡單，就是利用:before偽元素選擇器和content屬性結合使用，為span元素內添加一個偽元素，同時為元素的內容設置為span元素的data-content屬性值，並且設置它為絕對定位使其覆蓋在原來的span元素之上，寬度為原來span元素的一半，然後再設置這個為元素中字體的顏色，這樣就實現了我們的要求，看起來是一個文字，其實是兩個文字疊加覆蓋的效果。
二.相關閱讀:
1.:before可以參閱CSS的偽對象選擇符before/E::before一章節。
2.content屬性可以參閱CSS的content屬性一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14781
更多內容可以參閱:http://www.softwhy.com/divcss/
