Pseudo-classes & Pseudo-elements

ADVANCED

Master advanced CSS selectors for styling element states and creating decorative elements. Learn pseudo-classes, pseudo-elements, and creative styling techniques.

35 min

Tutorial 11 of 15

Pseudo-classes: Styling Element States

Pseudo-classes select elements based on their state or position in the document, enabling dynamic styling without JavaScript.

User Action Pseudo-classes:

CSS

1/* Basic interaction states */
2.button {
3  background: #3b82f6;
4  color: white;
5  padding: 12px 24px;
6  border: none;
7  border-radius: 8px;
8  cursor: pointer;
9  transition: all 0.3s ease;
10}
11
12.button:hover {
13  background: #2563eb;
14  transform: translateY(-2px);
15  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
16}
17
18.button:focus {
19  outline: none;
20  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
21}
22
23.button:active {
24  transform: translateY(0);
25  background: #1e40af;
26}
27
28.button:disabled {
29  opacity: 0.5;
30  cursor: not-allowed;
31  background: #94a3b8;
32}
33
34.button:disabled:hover {
35  transform: none;
36  box-shadow: none;
37}

Form State Pseudo-classes:

CSS

1/* Input field states */
2.input-field {
3  padding: 12px;
4  border: 2px solid #e5e7eb;
5  border-radius: 8px;
6  font-size: 16px;
7  transition: all 0.2s ease;
8}
9
10.input-field:focus {
11  border-color: #3b82f6;
12  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
13  outline: none;
14}
15
16.input-field:valid {
17  border-color: #10b981;
18}
19
20.input-field:invalid {
21  border-color: #ef4444;
22}
23
24.input-field:placeholder-shown {
25  border-color: #d1d5db;
26}
27
28.input-field:required:valid {
29  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
30  background-position: right 12px center;
31  background-repeat: no-repeat;
32  background-size: 20px;
33}
34
35/* Checkbox and radio states */
36input[type="checkbox"]:checked + label {
37  color: #3b82f6;
38  font-weight: 600;
39}
40
41input[type="radio"]:checked + label::before {
42  background: #3b82f6;
43  transform: scale(1);
44}

Link State Pseudo-classes:

CSS

1/* Link states - remember LVHA order */
2a:link {
3  color: #3b82f6;
4  text-decoration: none;
5}
6
7a:visited {
8  color: #7c3aed;
9}
10
11a:hover {
12  color: #1e40af;
13  text-decoration: underline;
14}
15
16a:active {
17  color: #1e3a8a;
18}
19
20/* Advanced link styling */
21.nav-link {
22  position: relative;
23  color: #64748b;
24  transition: color 0.3s ease;
25}
26
27.nav-link:hover {
28  color: #1e293b;
29}
30
31.nav-link::after {
32  content: '';
33  position: absolute;
34  bottom: -4px;
35  left: 0;
36  width: 0;
37  height: 2px;
38  background: #3b82f6;
39  transition: width 0.3s ease;
40}
41
42.nav-link:hover::after {
43  width: 100%;
44}
45
46/* Target pseudo-class */
47.section:target {
48  background: #fef3c7;
49  animation: highlight 2s ease-out;
50}
51
52@keyframes highlight {
53  from { background: #fbbf24; }
54  to { background: transparent; }
55}

Root and Language Pseudo-classes:

CSS

1/* Root element styling */
2:root {
3  --primary-color: #3b82f6;
4  --secondary-color: #64748b;
5  --background: #f8fafc;
6  --text: #1e293b;
7  font-size: 16px;
8}
9
10/* Language-specific styling */
11:lang(en) {
12  quotes: '"' '"' ''' ''';
13}
14
15:lang(fr) {
16  quotes: '« ' ' »';
17}
18
19q:before {
20  content: open-quote;
21}
22
23q:after {
24  content: close-quote;
25}
26
27/* Direction pseudo-classes */
28:dir(ltr) .arrow {
29  transform: rotate(0deg);
30}
31
32:dir(rtl) .arrow {
33  transform: rotate(180deg);
34}

Media and Feature Pseudo-classes:

CSS

1/* Preference pseudo-classes */
2@media (prefers-color-scheme: dark) {
3  :root {
4    --background: #1e293b;
5    --text: #f8fafc;
6  }
7}
8
9@media (prefers-reduced-motion: reduce) {
10  * {
11    animation-duration: 0.01ms !important;
12    transition-duration: 0.01ms !important;
13  }
14}
15
16/* Print-specific styling */
17@media print {
18  .no-print {
19    display: none !important;
20  }
21  
22  a:after {
23    content: " (" attr(href) ")";
24    color: #666;
25    font-size: 0.8em;
26  }
27}

Structural Pseudo-classes: Position-Based Targeting

Structural pseudo-classes select elements based on their position within their parent, enabling pattern-based styling.

Child Position Selectors:

CSS

1/* First and last child */
2.list-item:first-child {
3  border-top: none;
4  margin-top: 0;
5}
6
7.list-item:last-child {
8  border-bottom: none;
9  margin-bottom: 0;
10}
11
12.list-item:only-child {
13  border: 2px solid #3b82f6;
14  background: #eff6ff;
15}
16
17/* Type-specific first/last */
18h2:first-of-type {
19  color: #1e40af;
20  font-size: 2.5rem;
21}
22
23p:last-of-type {
24  margin-bottom: 0;
25}
26
27img:only-of-type {
28  display: block;
29  margin: 2rem auto;
30  border-radius: 12px;
31}

nth-child Patterns:

CSS

1/* Odd and even rows */
2.table-row:nth-child(odd) {
3  background: #f8fafc;
4}
5
6.table-row:nth-child(even) {
7  background: white;
8}
9
10/* Every third item */
11.grid-item:nth-child(3n) {
12  margin-right: 0;
13}
14
15.grid-item:nth-child(3n+1) {
16  clear: left;
17}
18
19/* First 3 items */
20.feature:nth-child(-n+3) {
21  border: 2px solid #10b981;
22  background: #ecfdf5;
23}
24
25/* Last 2 items */
26.feature:nth-last-child(-n+2) {
27  opacity: 0.7;
28}
29
30/* Every 4th item starting from 2nd */
31.card:nth-child(4n+2) {
32  transform: scale(1.05);
33  z-index: 2;
34}
35
36/* Complex patterns */
37.gallery-item:nth-child(8n+1),
38.gallery-item:nth-child(8n+2),
39.gallery-item:nth-child(8n+7),
40.gallery-item:nth-child(8n+8) {
41  height: 300px;
42}
43
44.gallery-item:nth-child(8n+3),
45.gallery-item:nth-child(8n+4),
46.gallery-item:nth-child(8n+5),
47.gallery-item:nth-child(8n+6) {
48  height: 200px;
49}

nth-of-type Patterns:

CSS

1/* Style specific types by position */
2h3:nth-of-type(1) {
3  color: #dc2626;
4  font-size: 1.8rem;
5}
6
7h3:nth-of-type(2) {
8  color: #ea580c;
9  font-size: 1.6rem;
10}
11
12h3:nth-of-type(3) {
13  color: #ca8a04;
14  font-size: 1.4rem;
15}
16
17/* Every other paragraph */
18p:nth-of-type(2n) {
19  font-style: italic;
20  padding-left: 2rem;
21  border-left: 4px solid #3b82f6;
22}
23
24/* First and last of each type */
25article h2:first-of-type {
26  margin-top: 0;
27}
28
29article p:last-of-type {
30  margin-bottom: 2rem;
31  font-weight: 500;
32}

Empty and Content Selectors:

CSS

1/* Empty elements */
2.message:empty {
3  display: none;
4}
5
6.container:empty::before {
7  content: "No content available";
8  color: #64748b;
9  font-style: italic;
10  display: block;
11  text-align: center;
12  padding: 2rem;
13}
14
15/* Elements with specific content */
16.status[data-status="success"]:not(:empty) {
17  background: #dcfce7;
18  color: #166534;
19  border: 1px solid #bbf7d0;
20}
21
22.status[data-status="error"]:not(:empty) {
23  background: #fef2f2;
24  color: #991b1b;
25  border: 1px solid #fecaca;
26}
27
28/* Has pseudo-class (future CSS) */
29.card:has(img) {
30  display: grid;
31  grid-template-columns: 200px 1fr;
32  gap: 1rem;
33}
34
35.form:has(:invalid) {
36  border: 2px solid #ef4444;
37}
38
39.form:has(:invalid) .submit-btn {
40  opacity: 0.5;
41  pointer-events: none;
42}

Complex Structural Combinations:

CSS

1/* Advanced combinations */
2.sidebar li:nth-child(odd):hover {
3  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
4  color: white;
5}
6
7.article:nth-of-type(3n+1):first-of-type {
8  grid-column: 1 / -1;
9  font-size: 1.2rem;
10}
11
12.card:nth-child(4n+1):not(:last-child) {
13  margin-bottom: 3rem;
14}
15
16/* Responsive structural styling */
17@media (min-width: 768px) {
18  .grid-item:nth-child(3n):not(:nth-child(6n)) {
19    margin-right: 1rem;
20  }
21  
22  .grid-item:nth-child(6n) {
23    margin-right: 0;
24  }
25}
26
27/* Print-specific structural styling */
28@media print {
29  .chapter:nth-of-type(odd) {
30    page-break-before: always;
31  }
32  
33  .footnote:nth-child(n+10) {
34    font-size: 0.8rem;
35  }
36}

Pseudo-elements: Creating Virtual Elements

Pseudo-elements create virtual elements that you can style and position, adding decorative and functional content without extra HTML.

::before and ::after Basics:

CSS

1/* Basic pseudo-element structure */
2.element::before,
3.element::after {
4  content: '';        /* Required - can be text or empty */
5  display: block;     /* Or inline, inline-block, etc. */
6  position: absolute; /* Often used for positioning */
7}
8
9/* Text content examples */
10.quote::before {
11  content: open-quote;
12  font-size: 4rem;
13  color: #3b82f6;
14  line-height: 1;
15}
16
17.quote::after {
18  content: close-quote;
19  font-size: 4rem;
20  color: #3b82f6;
21  line-height: 1;
22}
23
24.required::after {
25  content: ' *';
26  color: #ef4444;
27}
28
29.external-link::after {
30  content: ' ↗';
31  color: #64748b;
32  font-size: 0.9em;
33}
34
35/* Attribute content */
36.tooltip {
37  position: relative;
38  border-bottom: 1px dotted #3b82f6;
39}
40
41.tooltip::after {
42  content: attr(data-tooltip);
43  position: absolute;
44  bottom: 100%;
45  left: 50%;
46  transform: translateX(-50%);
47  background: #1e293b;
48  color: white;
49  padding: 8px 12px;
50  border-radius: 6px;
51  font-size: 0.9rem;
52  white-space: nowrap;
53  opacity: 0;
54  pointer-events: none;
55  transition: opacity 0.3s ease;
56}
57
58.tooltip:hover::after {
59  opacity: 1;
60}

Decorative Elements and Shapes:

CSS

1/* Decorative borders and dividers */
2.section-divider {
3  position: relative;
4  text-align: center;
5  margin: 3rem 0;
6}
7
8.section-divider::before {
9  content: '';
10  position: absolute;
11  top: 50%;
12  left: 0;
13  right: 0;
14  height: 1px;
15  background: linear-gradient(90deg, transparent, #d1d5db, transparent);
16  z-index: 1;
17}
18
19.section-divider span {
20  background: white;
21  padding: 0 2rem;
22  color: #64748b;
23  position: relative;
24  z-index: 2;
25}
26
27/* Decorative corners */
28.card-fancy {
29  position: relative;
30  background: white;
31  padding: 2rem;
32  border-radius: 12px;
33}
34
35.card-fancy::before,
36.card-fancy::after {
37  content: '';
38  position: absolute;
39  width: 20px;
40  height: 20px;
41  border: 3px solid #3b82f6;
42}
43
44.card-fancy::before {
45  top: 10px;
46  left: 10px;
47  border-right: none;
48  border-bottom: none;
49}
50
51.card-fancy::after {
52  bottom: 10px;
53  right: 10px;
54  border-left: none;
55  border-top: none;
56}
57
58/* Geometric shapes */
59.triangle-down::after {
60  content: '';
61  position: absolute;
62  top: 100%;
63  left: 50%;
64  transform: translateX(-50%);
65  width: 0;
66  height: 0;
67  border: 15px solid transparent;
68  border-top-color: #3b82f6;
69}
70
71.circle-indicator::before {
72  content: '';
73  position: absolute;
74  top: -5px;
75  right: -5px;
76  width: 12px;
77  height: 12px;
78  background: #ef4444;
79  border-radius: 50%;
80  border: 2px solid white;
81}

Icons and Symbols:

CSS

1/* CSS-only icons using pseudo-elements */
2.hamburger-menu {
3  position: relative;
4  width: 30px;
5  height: 4px;
6  background: #1e293b;
7  cursor: pointer;
8  transition: all 0.3s ease;
9}
10
11.hamburger-menu::before,
12.hamburger-menu::after {
13  content: '';
14  position: absolute;
15  left: 0;
16  width: 100%;
17  height: 4px;
18  background: #1e293b;
19  transition: all 0.3s ease;
20}
21
22.hamburger-menu::before {
23  top: -10px;
24}
25
26.hamburger-menu::after {
27  bottom: -10px;
28}
29
30.hamburger-menu.open {
31  background: transparent;
32}
33
34.hamburger-menu.open::before {
35  top: 0;
36  transform: rotate(45deg);
37}
38
39.hamburger-menu.open::after {
40  bottom: 0;
41  transform: rotate(-45deg);
42}
43
44/* Plus/cross icon */
45.plus-icon {
46  position: relative;
47  width: 20px;
48  height: 20px;
49}
50
51.plus-icon::before,
52.plus-icon::after {
53  content: '';
54  position: absolute;
55  background: #3b82f6;
56  transition: transform 0.3s ease;
57}
58
59.plus-icon::before {
60  top: 50%;
61  left: 0;
62  right: 0;
63  height: 2px;
64  transform: translateY(-50%);
65}
66
67.plus-icon::after {
68  top: 0;
69  bottom: 0;
70  left: 50%;
71  width: 2px;
72  transform: translateX(-50%);
73}
74
75.plus-icon.close::before,
76.plus-icon.close::after {
77  transform: translateX(-50%) translateY(-50%) rotate(45deg);
78  top: 50%;
79  left: 50%;
80  width: 20px;
81  height: 2px;
82}
83
84/* Arrow icons */
85.arrow-right::after {
86  content: '';
87  display: inline-block;
88  width: 8px;
89  height: 8px;
90  border-right: 2px solid currentColor;
91  border-bottom: 2px solid currentColor;
92  transform: rotate(-45deg);
93  margin-left: 0.5rem;
94}
95
96.dropdown::after {
97  content: '';
98  display: inline-block;
99  width: 0;
100  height: 0;
101  margin-left: 0.5rem;
102  vertical-align: middle;
103  border-top: 4px solid currentColor;
104  border-right: 4px solid transparent;
105  border-left: 4px solid transparent;
106  transition: transform 0.3s ease;
107}
108
109.dropdown.open::after {
110  transform: rotate(180deg);
111}

Advanced Layout Techniques:

CSS

1/* Overlay effects */
2.image-overlay {
3  position: relative;
4  overflow: hidden;
5  border-radius: 12px;
6}
7
8.image-overlay::before {
9  content: '';
10  position: absolute;
11  top: 0;
12  left: 0;
13  right: 0;
14  bottom: 0;
15  background: linear-gradient(
16    135deg,
17    rgba(59, 130, 246, 0.8),
18    rgba(139, 92, 246, 0.8)
19  );
20  opacity: 0;
21  transition: opacity 0.3s ease;
22  z-index: 1;
23}
24
25.image-overlay:hover::before {
26  opacity: 1;
27}
28
29.image-overlay::after {
30  content: 'View Details';
31  position: absolute;
32  top: 50%;
33  left: 50%;
34  transform: translate(-50%, -50%);
35  color: white;
36  font-weight: bold;
37  font-size: 1.1rem;
38  opacity: 0;
39  transition: opacity 0.3s ease 0.1s;
40  z-index: 2;
41}
42
43.image-overlay:hover::after {
44  opacity: 1;
45}
46
47/* Clearfix using pseudo-elements */
48.clearfix::after {
49  content: '';
50  display: table;
51  clear: both;
52}
53
54/* Custom list styling */
55.custom-list {
56  list-style: none;
57  padding: 0;
58}
59
60.custom-list li {
61  position: relative;
62  padding-left: 2rem;
63  margin-bottom: 0.5rem;
64}
65
66.custom-list li::before {
67  content: '✨';
68  position: absolute;
69  left: 0;
70  color: #3b82f6;
71  font-weight: bold;
72}
73
74/* Progress indicators */
75.progress-step {
76  position: relative;
77  padding-left: 3rem;
78}
79
80.progress-step::before {
81  content: counter(step-counter);
82  counter-increment: step-counter;
83  position: absolute;
84  left: 0;
85  top: 0;
86  width: 2rem;
87  height: 2rem;
88  background: #3b82f6;
89  color: white;
90  border-radius: 50%;
91  display: flex;
92  align-items: center;
93  justify-content: center;
94  font-weight: bold;
95  font-size: 0.9rem;
96}
97
98.progress-container {
99  counter-reset: step-counter;
100}

Advanced Pseudo-element Techniques

Master advanced pseudo-element techniques for creating complex layouts, animations, and interactive elements.

Multi-layer Pseudo-element Effects:

CSS

1/* Layered shadow effects */
2.shadow-card {
3  position: relative;
4  background: white;
5  padding: 2rem;
6  border-radius: 16px;
7}
8
9.shadow-card::before {
10  content: '';
11  position: absolute;
12  top: 0;
13  left: 0;
14  right: 0;
15  bottom: 0;
16  background: inherit;
17  border-radius: inherit;
18  filter: blur(20px);
19  opacity: 0.3;
20  z-index: -2;
21  transform: translateY(10px) scale(0.95);
22}
23
24.shadow-card::after {
25  content: '';
26  position: absolute;
27  top: 0;
28  left: 0;
29  right: 0;
30  bottom: 0;
31  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
32  border-radius: inherit;
33  z-index: -1;
34  transform: translateY(-2px);
35}
36
37/* Animated pseudo-elements */
38.loading-button {
39  position: relative;
40  background: #3b82f6;
41  color: white;
42  border: none;
43  padding: 12px 24px;
44  border-radius: 8px;
45  cursor: pointer;
46  overflow: hidden;
47}
48
49.loading-button.loading::after {
50  content: '';
51  position: absolute;
52  top: 0;
53  left: -100%;
54  width: 100%;
55  height: 100%;
56  background: linear-gradient(
57    90deg,
58    transparent,
59    rgba(255, 255, 255, 0.4),
60    transparent
61  );
62  animation: shimmer 1.5s infinite;
63}
64
65@keyframes shimmer {
66  to {
67    left: 100%;
68  }
69}
70
71/* Morphing shapes */
72.morph-element {
73  position: relative;
74  width: 100px;
75  height: 100px;
76  background: #3b82f6;
77  border-radius: 50px;
78  transition: all 0.5s ease;
79}
80
81.morph-element::before,
82.morph-element::after {
83  content: '';
84  position: absolute;
85  width: 100%;
86  height: 100%;
87  background: inherit;
88  border-radius: inherit;
89  transition: all 0.5s ease;
90}
91
92.morph-element::before {
93  transform: rotate(0deg);
94}
95
96.morph-element::after {
97  transform: rotate(0deg);
98}
99
100.morph-element:hover {
101  border-radius: 0;
102  transform: rotate(45deg);
103}
104
105.morph-element:hover::before {
106  transform: rotate(45deg) scale(0.7);
107  border-radius: 50%;
108}
109
110.morph-element:hover::after {
111  transform: rotate(-45deg) scale(0.5);
112  border-radius: 50%;
113  background: #10b981;
114}

Content Generation and Counters:

CSS

1/* Auto-numbering with counters */
2.chapter {
3  counter-reset: section-counter;
4}
5
6.chapter h2 {
7  counter-increment: chapter-counter;
8}
9
10.chapter h2::before {
11  content: "Chapter " counter(chapter-counter) ": ";
12  color: #3b82f6;
13  font-weight: normal;
14}
15
16.section {
17  counter-increment: section-counter;
18}
19
20.section h3::before {
21  content: counter(chapter-counter) "." counter(section-counter) " ";
22  color: #64748b;
23}
24
25/* Complex counter styling */
26.outline {
27  counter-reset: item;
28  padding-left: 0;
29}
30
31.outline li {
32  display: block;
33  margin-bottom: 0.5rem;
34}
35
36.outline li::before {
37  content: counters(item, ".") " ";
38  counter-increment: item;
39  color: #3b82f6;
40  font-weight: bold;
41  margin-right: 0.5rem;
42}
43
44.outline ol {
45  counter-reset: item;
46}
47
48/* Dynamic content from attributes */
49.product-card::after {
50  content: "$" attr(data-price);
51  position: absolute;
52  top: 10px;
53  right: 10px;
54  background: #10b981;
55  color: white;
56  padding: 4px 8px;
57  border-radius: 4px;
58  font-weight: bold;
59  font-size: 0.9rem;
60}
61
62.status-indicator::before {
63  content: attr(data-status);
64  text-transform: uppercase;
65  font-size: 0.8rem;
66  font-weight: bold;
67  padding: 2px 6px;
68  border-radius: 3px;
69  margin-right: 0.5rem;
70}
71
72.status-indicator[data-status="active"]::before {
73  background: #dcfce7;
74  color: #166534;
75}
76
77.status-indicator[data-status="pending"]::before {
78  background: #fef3c7;
79  color: #92400e;
80}
81
82.status-indicator[data-status="error"]::before {
83  background: #fef2f2;
84  color: #991b1b;
85}

Responsive Pseudo-elements:

CSS

1/* Responsive pseudo-element behavior */
2.responsive-decoration::before {
3  content: '🎨';
4  font-size: 2rem;
5  position: absolute;
6  top: -10px;
7  right: -10px;
8}
9
10@media (max-width: 768px) {
11  .responsive-decoration::before {
12    content: '✨';
13    font-size: 1.5rem;
14    position: static;
15    display: inline-block;
16    margin-right: 0.5rem;
17  }
18}
19
20/* Hide pseudo-elements on mobile */
21@media (max-width: 480px) {
22  .desktop-only::before,
23  .desktop-only::after {
24    display: none;
25  }
26}
27
28/* Print-specific pseudo-elements */
29@media print {
30  .external-link[href^="http"]::after {
31    content: " (" attr(href) ")";
32    font-size: 0.8em;
33    color: #666;
34  }
35  
36  .page-break::after {
37    content: "";
38    display: block;
39    page-break-after: always;
40  }
41}

Performance Considerations:

CSS

1/* Efficient pseudo-element animations */
2.efficient-hover::before {
3  content: '';
4  position: absolute;
5  inset: 0;
6  background: rgba(59, 130, 246, 0.1);
7  transform: scale(0);
8  transition: transform 0.3s ease;
9  will-change: transform;
10}
11
12.efficient-hover:hover::before {
13  transform: scale(1);
14}
15
16/* Avoid expensive properties in pseudo-elements */
17.optimized-decoration::after {
18  content: '';
19  position: absolute;
20  width: 20px;
21  height: 20px;
22  background: #3b82f6;
23  border-radius: 50%;
24  /* Use transform instead of top/left changes */
25  transform: translateX(100px);
26  transition: transform 0.3s ease;
27}
28
29.optimized-decoration:hover::after {
30  transform: translateX(120px);
31}
32
33/* Minimize DOM impact */
34.minimal-pseudo {
35  position: relative;
36}
37
38.minimal-pseudo::before {
39  content: '';
40  position: absolute;
41  inset: 0;
42  border: 2px solid currentColor;
43  border-radius: inherit;
44  opacity: 0;
45  transition: opacity 0.2s ease;
46}
47
48.minimal-pseudo:focus::before {
49  opacity: 1;
50}
51
52/* Clean up animations */
53.pseudo-animation {
54  position: relative;
55}
56
57.pseudo-animation::after {
58  content: '';
59  position: absolute;
60  inset: 0;
61  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
62  transform: translateX(-100%);
63  transition: transform 0.6s ease;
64}
65
66.pseudo-animation:hover::after {
67  transform: translateX(100%);
68}
69
70.pseudo-animation:not(:hover)::after {
71  transition-delay: 0.1s;
72}