CSS

CSS Highlight,用 CSS 為文字畫上底線

前陣子在網路上看見的特別做法,沒想到可以用這種方式為文字做 Highlight, 畫底線。
一般來說,都只是設定底色做highlight,利用這個方式看起來比較美觀(?)
為這個特別的 CSS 用法做個記錄

 

 

一般來說要 Highlight 某個文字都只是填滿整個文字區塊,但這個做法比較特別,如下圖
highlight-scope
(highlight 的部份不是整個文字區塊)

 

 

Highlight 文字,幫文字畫上底線

方法很簡單,範例 HTML

<div class="con">
 cola.workxplay.net <span class="highlight">工作玩樂實驗室</span>
</div>

CSS 部份

.highlight{
  position: relative;
}
.highlight:before{
  content: "";
  z-index: -1;
  position: absolute;
  height: 0.7em;
  top: 0.6em;
  background: red;
  width: 100%;

  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";

  /* IE 5-7 */
  filter: alpha(opacity=55);

  /* Netscape */
  -moz-opacity: 0.55;

  /* Safari 1.x */
  -khtml-opacity: 0.55;

  /* Good browsers */
  opacity: 0.55;
}

很簡單吧,利用 偽元素 做出底層,透明度(opacity) 的部份就選用吧

 

再看一下這個 highlight 畫底線的 CSS 效果

cola-workxplay-net-highlight

發表迴響