Tag

Pseudo-elements

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 11, 2022 · Frontend Development

Understanding CSS Pseudo‑Classes and Pseudo‑Elements with Practical Examples

This article explains the differences between CSS pseudo‑classes and pseudo‑elements, lists their common selectors, and provides detailed usage examples—including content insertion, image addition, clearing floats, disabling search, and creating animated button effects—complete with code snippets and visual demonstrations.

CSSPseudo-classesPseudo-elements
0 likes · 12 min read
Understanding CSS Pseudo‑Classes and Pseudo‑Elements with Practical Examples
IT Services Circle
IT Services Circle
May 1, 2022 · Frontend Development

Creating an Animated Douyin (TikTok) Logo Using a Single HTML Tag

This article demonstrates how to recreate the Douyin (TikTok) logo with animation using only a single HTML element, by dissecting its geometric components, employing CSS pseudo‑elements, background‑image gradients, variables, blend modes, and hover‑triggered transformations to achieve the full effect.

CSSLogo DesignPseudo-elements
0 likes · 14 min read
Creating an Animated Douyin (TikTok) Logo Using a Single HTML Tag
ByteFE
ByteFE
Dec 1, 2021 · Frontend Development

Creating a Breakfast Noodle Dish with CSS: A Step-by-Step Guide

This article demonstrates how to create a breakfast noodle dish using CSS, covering techniques like :before/:after pseudo-elements, box-shadow, and gradients to build a visually appealing and realistic food illustration.

Box-shadowCSSFood Illustration
0 likes · 8 min read
Creating a Breakfast Noodle Dish with CSS: A Step-by-Step Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 2, 2021 · Frontend Development

Creating Colorful, Smart Shadows with CSS

This tutorial explains how to use HTML, CSS pseudo‑elements, filters, and animations to generate dynamic, colorful shadows behind images, replicating smart‑shadow effects without JavaScript, and provides reusable code snippets for various use cases.

CSSPseudo-elementsShadow Effects
0 likes · 10 min read
Creating Colorful, Smart Shadows with CSS
政采云技术
政采云技术
Apr 20, 2021 · Frontend Development

Deep Dive into CSS Selectors: Types, Usage, and Priority

This article provides a comprehensive analysis of CSS selectors, covering their classification, detailed usage of various selector types, and the calculation of selector priority with practical examples.

CSSPseudo-classesPseudo-elements
0 likes · 14 min read
Deep Dive into CSS Selectors: Types, Usage, and Priority
UC Tech Team
UC Tech Team
Oct 15, 2018 · Frontend Development

Understanding the CSS content Property and Its Limitations with ::before and ::after

This article explains how the CSS content property works with ::before and ::after pseudo‑elements, demonstrates which values are accepted or rejected—including numeric and calc() values—shows how to use counters and images, and highlights common pitfalls such as treating numbers as strings.

CSSPseudo-elementscontent property
0 likes · 3 min read
Understanding the CSS content Property and Its Limitations with ::before and ::after