CSS設定半個文字的樣式
通常情況下,文字的樣式作用於整個文字,下面介紹一下如何為部分文字設定指定的樣式。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!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一章節。
(3).絕對定位參閱CSS position:absolute 絕對定位一章節。
(4).內聯元素轉換為塊級元素參閱內聯元素和塊級元素相互轉換一章節。
相關文章
- CSS 設定文字樣式CSS
- CSS 設定placeholder文字樣式CSS
- CSS 設定input文字框樣式CSS
- css設定input文字框樣式CSS
- CSS 設定元素第一行文字樣式CSS
- css設定第2個li元素的樣式CSS
- CSS 設定 <progress>樣式CSS
- CSS 設定列表樣式CSS
- CSS 設定前n個li元素樣式CSS
- CSS設定第n個li元素樣式CSS
- CSS 設定第n個li元素樣式CSS
- CSS系列:CSS文字樣式CSS
- css設定文字第一行的樣式程式碼例項CSS
- 純css設定input文字框獲取焦點時的樣式CSS
- CSS如何設定物件中第一行文字的樣式CSS物件
- CSS設定連線<a>的樣式CSS
- css設定具有指定type屬性值的input文字框的樣式CSS
- 常用CSS樣式1:文字樣式CSS
- Css基本樣式————文字CSS
- CSS 設定svg元素樣式CSSSVG
- CSS 設定table表格樣式CSS
- CSS 設定連結樣式CSS
- js批量設定css樣式JSCSS
- css 字型樣式設定大全CSS
- CSS樣式設定小技巧CSS
- CSS實現的文字框獲取焦點設定樣式程式碼CSS
- 【CSS】【16】設定超連結的CSS樣式CSS
- css如何設定字串中第一個字元的樣式CSS字串字元
- CSS中多個class樣式設定的不同寫法CSS
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- 1.5 常用CSS樣式1:文字樣式CSS
- CSS 設定<img>圖片樣式CSS
- CSS input文字框樣式CSS
- CSS input 文字框樣式CSS
- 簡單設定blog的樣式CSSCSS
- JS設定css樣式的幾種方式JSCSS
- 設定input type為text的文字框樣式
- CSS——行高、字型、文字的樣式CSS