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

一般來說要 Highlight 某個文字都只是填滿整個文字區塊，但這個做法比較特別，如下圖

(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 效果