Sep 23, 2025 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 上一篇我們學到了 ::before 與 ::after 的基本用法，像是輕鬆添加引號、點綴裝飾性內容、清除浮動，甚至是製作小圖示。 這次，讓我們來探索更進階的用法，解決兩個常見的網頁設計難題：<table> 手機版與客製化 <ol> 清單。 一、RWD Table：會變身的響應式表格 (HTML data-*) 要做到 <table> RWD 手機版，需要運用 HTML 的 data-* 屬性，然後再使用 ...
Join discussion
Sep 22, 2025 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 之前寫的文章，雖然有提到過，但是居然沒有好好地解釋過 CSS 的偽元素（Pseudo），也就是 ::before 與 ::after。這超級實用的，怎麼能沒有呢？所以今天就來好好地認識一下它們吧！ 它們用在不修改 HTML 的情況下加入裝飾性內容，是前端開發的必備技能。 ::before 與 ::after，簡單來說，就像是你在 HTML 元素的前後，額外加上了兩個裝飾用的「影子」元素。而且，你完全不需要去動...
Join discussion
Aug 13, 2025 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 CSS 偽類提供了一種方法，讓我們可以根據元素的不同狀態來變更其樣式。例如，當使用者將滑鼠移到元素上或點擊元素時，偽類會根據這些狀態套用特定的樣式（突然覺得這應該在剛開始先交給大家 XD）。 註：最近重感冒好了一些，加上放了颱風假，明天開始會漸漸地把之前和這一篇缺的的 DEMO 補上。 以下是幾個常用的偽類介紹及應用…
Join discussion
Sep 22, 2024 · 2 min read · CSS pseudo-elements are used to style specific parts of an element's content, such as the first letter, the first line, or the part of the text a user selects. Let's explore the pseudo-elements ::first-letter, ::first-line, and ::selection. 1. Pseudo...
Join discussion