--- title: "#pseudo-classes articles | Hashnode" description: "Explore 40 articles tagged #pseudo-classes on Hashnode. Tutorials, guides, and how-tos from the community." url: "https://hashnode.com/tag/pseudo-classes" --- Tag # #pseudo-classes 40 posts · 0 followers [YI-LIN CHEN (Eva)](https://hashnode.com/@im1010ioio) · [Sep 22, 2025](https://hashnode.com/posts/css-pseudo-before-after/68d17012a4b53c6f701b008a) ### [#71 CSS 偽元素的妙用：「::before」 與「::after」的常見用法](https://im1010ioio.hashnode.dev/css-pseudo-before-after?utm_source=hashnode&utm_medium=feed) ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 之前寫的文章，雖然有提到過，但是居然沒有好好地解釋過 CSS 的偽元素（Pseudo），也就是 ::before 與 ::after。這超級實用的，怎麼能沒有呢？所以今天就來好好地認識一下它們吧！ 它們用在不修改 HTML 的情況下加入裝飾性內容，是前端開發的必備技能。 ::before 與 ::after，簡單來說，就像是你在 HTML 元素的前後，額外加上了兩個裝飾用的「影子」元素。而且，你完全不需要去動... 1 min read · [im1010ioio.hashnode.dev](https://im1010ioio.hashnode.dev/css-pseudo-before-after?utm_source=hashnode&utm_medium=feed) [YI-LIN CHEN (Eva)](https://hashnode.com/@im1010ioio) · [Aug 13, 2025](https://hashnode.com/posts/css-pseudo-classes/689c63996d38c9746eedff86) ### [#52 詳細了解 CSS 各種偽類：hover、focus、active、focus-within、focus-visible、target](https://im1010ioio.hashnode.dev/css-pseudo-classes?utm_source=hashnode&utm_medium=feed) ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 CSS 偽類提供了一種方法，讓我們可以根據元素的不同狀態來變更其樣式。例如，當使用者將滑鼠移到元素上或點擊元素時，偽類會根據這些狀態套用特定的樣式（突然覺得這應該在剛開始先交給大家 XD）。 註：最近重感冒好了一些，加上放了颱風假，明天開始會漸漸地把之前和這一篇缺的的 DEMO 補上。 以下是幾個常用的偽類介紹及應用… 1 min read · [im1010ioio.hashnode.dev](https://im1010ioio.hashnode.dev/css-pseudo-classes?utm_source=hashnode&utm_medium=feed) [Sunkanmi Fafowora](https://hashnode.com/@SunkanmiFafowora) · [Jun 10, 2025](https://hashnode.com/posts/is-open-the-same-as-popover-open/684812c868cb29f9c75a89c6) ### [Is :open the same as :popover-open?](https://sunkanmi.hashnode.dev/is-open-the-same-as-popover-open?utm_source=hashnode&utm_medium=feed) 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... 5 min read · [sunkanmi.hashnode.dev](https://sunkanmi.hashnode.dev/is-open-the-same-as-popover-open?utm_source=hashnode&utm_medium=feed) [Mikey Nichols](https://hashnode.com/@mNix) · [Apr 20, 2025](https://hashnode.com/posts/the-future-of-web-components/6804715917b9474cc9bc3526) ### [The Future of Web Components](https://journeytocode.hashnode.dev/the-future-of-web-components?utm_source=hashnode&utm_medium=feed) Where Innovation Meets Standardization 13 min read · [journeytocode.hashnode.dev](https://journeytocode.hashnode.dev/the-future-of-web-components?utm_source=hashnode&utm_medium=feed) [himanshu](https://hashnode.com/@Himanshu-) · [Jan 28, 2025](https://hashnode.com/posts/understanding-pseudo-classes-and-pseudo-elements-in-css/679888390fecfcd425407147) ### [Understanding Pseudo Classes and Pseudo Elements in CSS](https://blogs-himanshu.hashnode.dev/understanding-pseudo-classes-and-pseudo-elements-in-css?utm_source=hashnode&utm_medium=feed) 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... 6 min read · [blogs-himanshu.hashnode.dev](https://blogs-himanshu.hashnode.dev/understanding-pseudo-classes-and-pseudo-elements-in-css?utm_source=hashnode&utm_medium=feed) [1](https://hashnode.com/posts/understanding-pseudo-classes-and-pseudo-elements-in-css/679888390fecfcd425407147) [Abdelfattah Ragab](https://hashnode.com/@abdelfattahr) · [Dec 31, 2024](https://hashnode.com/posts/css-selectors-and-specificity-by-abdelfattah-ragab/677416513ba71b8eeb80b4a6) ### [CSS Selectors and Specificity by Abdelfattah Ragab](https://abdelfattah-r.hashnode.dev/css-selectors-and-specificity-by-abdelfattah-ragab?utm_source=hashnode&utm_medium=feed) CSS Selectors and Specificity by Abdelfattah Ragab Welcome to the book "CSS Selectors and Specificity". In this book, I explain the different types of selectors, from simple element selectors to advanced attribute selectors and pseudo-classes. You wi... 1 min read · [abdelfattah-r.hashnode.dev](https://abdelfattah-r.hashnode.dev/css-selectors-and-specificity-by-abdelfattah-ragab?utm_source=hashnode&utm_medium=feed) [Eleftheria Batsou](https://hashnode.com/@eleftheriabatsou) · [Sep 6, 2024](https://hashnode.com/posts/css3-selectors-with-examples/66dac0a12fa3c61eb9002e33) ### [Mastering CSS3 Selectors: A Complete Guide with Examples](https://eleftheriabatsou.hashnode.dev/css3-selectors-with-examples?utm_source=hashnode&utm_medium=feed) Unlock the Full Potential of CSS3 Selectors with Practical Examples and Tips 9 min read · [eleftheriabatsou.hashnode.dev](https://eleftheriabatsou.hashnode.dev/css3-selectors-with-examples?utm_source=hashnode&utm_medium=feed) [Eleftheria Batsou](https://hashnode.com/@eleftheriabatsou) · [Sep 1, 2024](https://hashnode.com/posts/css3-pseudo-classes-and-pseudo-elements-an-in-depth-look/66d4881af406310be4cbae7e) ### [CSS3 Pseudo-Classes and Pseudo-Elements: An In-Depth Look](https://eleftheriabatsou.hashnode.dev/css3-pseudo-classes-and-pseudo-elements-an-in-depth-look?utm_source=hashnode&utm_medium=feed) (+ Codepen Examples) 6 min read · [eleftheriabatsou.hashnode.dev](https://eleftheriabatsou.hashnode.dev/css3-pseudo-classes-and-pseudo-elements-an-in-depth-look?utm_source=hashnode&utm_medium=feed) [1](https://hashnode.com/posts/css3-pseudo-classes-and-pseudo-elements-an-in-depth-look/66d4881af406310be4cbae7e) [Ayush Nighoskar](https://hashnode.com/@ayush9) · [Feb 25, 2024](https://hashnode.com/posts/elevating-css-mastery-pseudo-elements-css-sprites-and-display-magic/65db40fd8f742dbd6ef1a005) ### [Elevating CSS Mastery: Pseudo-Elements, CSS Sprites, and Display Magic](https://ayushn.hashnode.dev/elevating-css-mastery-pseudo-elements-css-sprites-and-display-magic?utm_source=hashnode&utm_medium=feed) Elevating CSS Mastery: Pseudo-Elements, CSS Sprites, and Display Magic 2 min read · [ayushn.hashnode.dev](https://ayushn.hashnode.dev/elevating-css-mastery-pseudo-elements-css-sprites-and-display-magic?utm_source=hashnode&utm_medium=feed) [Namya Shah](https://hashnode.com/@bigsmoke7) · [Dec 23, 2023](https://hashnode.com/posts/basics-css-questions-part-1/65867e749b70e90c90dae355) ### [Basics CSS Questions Part 1](https://bigsmoke.hashnode.dev/basics-css-questions-part-1?utm_source=hashnode&utm_medium=feed) What does CSS stand for? Cascading Style Sheets. What is the purpose of CSS? It's used to style the layout and appearance of web pages. How do you link an external CSS file to an HTML document? Using the tag within the HTML secti... 3 min read · [bigsmoke.hashnode.dev](https://bigsmoke.hashnode.dev/basics-css-questions-part-1?utm_source=hashnode&utm_medium=feed)