CSS設定半個文字的樣式

antzone發表於2018-07-11
原文網址 : https://www.softwhy.com/article-2914-1.html
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）.內聯元素轉換為塊級元素參閱內聯元素和塊級元素相互轉換一章節。

相關文章