聆風之境

今天來談談一個很輕鬆的小題目。

網頁工程師開發時不可避免的小餅乾屑，系統使用不成文的潛規則 --- 必填欄位之*號傳說 ( 大誤

↓↓↓ 來談點正經的 ↓↓↓

***從前從前***

絕大多數的網頁系統設計時，都會有一個慣例，所有必須填寫的欄位前方，都會加上一個紅色的 * 字符

有時候也會直接出現紅字的 必填 啦，但 * 字符就是佔了不小的比例。

剛開始寫網頁系統時，跟合作的設計窗口兩人都很循規蹈矩，紅色 * 字符就紅色 * 字符

所以頁面上滿滿的是

就是那個span  XD

其實這做法也沒什麼不好，改顏色改尺寸的，設計窗口都能應付得過來

但就希望不要哪天客戶突然吃壞了什麼(?)想要改符號，一個系統有數十個頁面上百個欄位，那我們可能只能手牽手哭倒長城給他看了

***偽元素( Pseudo Element )***

直到換了設計好夥伴的某一天，突然驚覺常見的風景不再 --- 不是，是那滿滿的red span * 消失了

自此接觸到新天地，原來是偽元素。

偽元素不是真正的網頁元素，目前w3schools所列偽元素包含

1. ::after
2. ::before
3. ::first-letter
4. ::first-line
5. ::selection

那既然講到偽元素Pseudo Element，就不得不提到 偽類 ( Pseudo Classes )。

「A pseudo-class is used to define a special state of an element.」 (  引用自w3schools )

w3schools對偽類的解釋是用來「定義元素的特殊狀態」，即指在特定的動作下，呈現不同的CSS樣式。

但我本身不是前端大師，所以只簡單介紹到這裡暫先按下不表，或許哪天想到再來寫寫囉~

話說回偽元素，以此狀況來說，透過after或before的特性，改為如下

自此之後必填欄位什麼的就此海闊天空啦~

不過如果有SEO考量的，可能要再多思考一下

關於偽元素跟偽類其他還有很多精彩的相關應用(可見資料來源，裡面有很多精彩的例子)

有興趣的人可以自己再深入研究看看哦，也歡迎分享~

資料來源 :

CSS 偽元素 ( before 與 after )

CSS | 全都是假的！關於那些偽類和偽元素 - 基本用法

CSS Pseudo-classes