趁著記憶猶新的狀況,記錄自己使用偽元素 (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

{% codeblock %}

正確觀念 正確觀念
{% endcodeblock %}

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

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

更改過後的 html code

{% codeblock %}

{% endcodeblock %}

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

&:before{
	position: absolute;
	bottom: -7px;
	left: 12px;
	content: attr(data-text); <!-- 關鍵作法 -->
}

} .conceptlabel{ background-image: url(../img/icon01c.png); } {% endcodeblock %}

觀念整理

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

reference

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