趁著記憶猶新的狀況，記錄自己使用偽元素 (pseudo-element)讓原本的 html 架構更加簡潔的方法。

何謂 pseudo-element?

不會出現在 html 的文件裡面，而是利用 css 讓瀏覽器去實作。以下列出的都是可以使用的 pseudo-element。

1. ::first-line：若是 p 元素，則可以用來操作第一行。
2. ::first-letter：用來操作第一個字。
3. ::before：可以在所選元素之前插入樣式/內容。
4. ::after：同before但是是在之後插入。
5. ::selection：用來自定反白後的效果。

為了區分偽元素和偽類，CSS3 的 guildline 將偽元素的寫法修正，以往只要加一個冒號「:」，現在則是加兩個冒號「::」，部分可支援的瀏覽器包含 webkit, firefox, opera。) -- by MUKI

修改過程

原本的 html code

<div class="icon">
  <img src="img/icon01.png" alt="正確觀念" />
  <span>正確觀念</span>
</div>

.icon {
  display: inline-block;
  position: relative;
  padding: 1em;
  padding-top: 5px;
  span {
    position: absolute;
    bottom: -7px;
    left: 12px;
  }
}

原本利用 div > span 的效果去把中文字顯現出來，所以在 html 的架構下，需要多一個span的 tag。
且利用img去把圖片給 show 出來。

更改過後的 html code

<!-- html只剩一行！-->
<div data-text="正確觀念" class="concept_label icon"></div>

.icon {
  display: inline-block;
  position: relative;
  padding: 1em;
  padding-top: 5px;

  &:before {
    position: absolute;
    bottom: -7px;
    left: 12px;
    content: attr(data-text); // 關鍵作法
  }
}
.concept_label {
  background-image: url(../img/icon01_c.png);
}

###觀念整理

1. 將中文字放入自訂的data-*屬性
2. CSS 中利用::before取代原本的span
3. 利用content: attr(data-text);將 date-text 文字取出來
4. 將背景圖片利用另外一個 class 取代，以後維護性提高。

reference

那些 CSS 偽元素可以幫你做的 10 個效果