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
Sep 18, 2025 · 3 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 上一篇我們提到 CSS 的 :target 的偽類，可以針對 HTML 元素是否為目標狀態而去調整樣式。所以，如果延伸想一想，有許多 UI 都是會有狀態的，其實是可以做許多應用的。 上一篇著重在滾動時的目標狀態，這一篇我們來試試把這種目標狀態應用在別的地方吧！ 一、純 CSS 光箱 光箱（Lightbox）效果是網頁中非常常見的 UI，通常用於點擊圖片或按鈕後，跳出一個覆蓋整個畫面的視窗來顯示更多內容。以...
Join discussion
Sep 17, 2025 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 昨天我們讓很長內容的滾動範圍可以用 hash 連結滑順地滾動，今天我們要進一步優化它。 當網頁內容很長，使用者滾來滾去時可能會搞不清楚目前位置，所以今天我要來用 CSS 最簡單的方法 Highligh hash 連結的目標。 今天我們要介紹 2 個 CSS 選擇器語法： :target：針對 HTML 元素去調整樣式 ::target-text：針對指定的「文字片段」去調整樣式 非常簡單喔！讓我們一起...
Join discussion
Jun 10, 2025 · 5 min read · Obviously, the answer is no. But, the next question you’d ask is how? In the MDN documentation, we clearly have :open being defined as “The :open CSS pseudo-class represents an element that has open and closed states, only when it is currently in the...
Join discussion
Jan 28, 2025 · 6 min read · Pseudo Classes Pseudo Classes are the keywords which is used after the selector which help in defining or designing the state of the selector. For example, if you use CSS, you must have used :hover keyword in buttons or links, this is the pseudo clas...
SSatyarth commented
Oct 17, 2024 · 5 min read · During my time at Teachers Pay Teachers (TpT) on the Easel team, we once had a Customer-Delight-o-than or rather a sprint where we only focused on implementing features and changes to Easel that our users requested. I took on the seemingly easy task ...
Join discussionSep 6, 2024 · 9 min read · Introduction In this article, we will talk about CSS3 selectors, a really powerful tool for everyone who wants to do more while writing less. Whether you're just starting or brushing up your skills, this guide will walk you through the basics to the ...
Join discussion
Sep 1, 2024 · 6 min read · Introduction Hey amazing people. Today, we're diving deep into the world of Pseudo-Classes and Pseudo-Elements in CSS. These are powerful tools in our CSS toolkit that help us target and style elements in unique ways, making our work more efficient a...
BBobo commented
Feb 25, 2024 · 2 min read · Introduction CSS is a dynamic styling language that offers a plethora of tools for crafting engaging and interactive web designs. In this guide, we'll delve into the enchanting world of pseudo-elements and classes, explore the efficiency of CSS sprit...
Join discussion