Pseudo - Hover, Focus, placeholder
The Pseudo Utilities extend Bootstrap with advanced hover, focus, and placeholder controls using custom classes. All utilities follow your al- namespace and fully support opacity variations, transform effects, and component customization.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Type | Class Format | Description |
|---|---|---|
| No Focus | .al-no-focus | Disable outline on focus |
| Placeholder | .al-placeholder-{color} | Placeholder color |
| Placeholder Opacity | .al-placeholder-{color}-{opacity} | Placeholder with rgba opacity |
| Hover Text Color | .al-hover-text-{color} | Text color on hover |
| Hover Outline Color | .al-hover-outline-{color} | Outline color on hover |
| Hover Rotate | .al-hover-rotate-{deg} | Rotate on hover |
| Hover Scale | .al-hover-scale-{level} | Scale on hover |
| Hover Opacity | .al-hover-{type}-{color}-{opacity} | Color with rgba opacity |
| Hover Stop Animation | .al-hover-stop-animation | Stop animation on hover |
| Hover Glass shining Animation | . al-hover-glass-shine | Glass shining on hover |
| Hover Child Show / Hide | (parent) .al-hover-show / (child) .al-hover-show-hide | Show / Hide child on hover |
| Hover BG Color | .al-hover-bg-{color} | Background color on hover |
| Hover Border Color | .al-hover-border-{color} | Border color on hover |
| Hover Animated Border Gradient Color | .al-animate-border-gradient | Animated Border gradient color on hover |
| Hover Animated border | .al-fancy-border | Animated border |
| Hover Animated border double | .al-fancy-border-double | Animated border double |
| Hover Fancy border | .al-hover-fancy-border .al-hover-fancy-border-1 | Fancy border |
| Hover Glow | .al-hover-glow | Glowing on hover |
| Hover Animated Shadow | .al-hover-shadow | Animated shadow on hover |
| Hide Pseudo Before / After | .al-no-before / .al-no-after | Hide ::before, ::after |
Sass Reference
assets/scss/_pseudo.scss
Copy
Class Usage Reference
| Class | Output |
|---|---|
| .al-hover-text-primary | color: var(--bs-primary) |
| .al-hover-bg-danger | background-color: var(--bs-danger) |
| .al-hover-border-success | border-color: var(--bs-success) |
| .al-hover-outline-warning | outline-color: var(--bs-warning) |
| .al-hover-rotate-180 | transform: rotate(180deg) |
| .al-hover-scale-2 | transform: scale(1.25) |
| .al-hover-bg-primary-50 | rgba(var(--bs-primary-rgb), 0.50) |
| .al-no-focus | outline: 0 |
| .al-placeholder-secondary | color: var(--bs-secondary) |
| .al-placeholder-black-25 | rgba(black, 0.25) |
| .al-no-before | ::before{ display:none } |
| .al-no-after | ::after{ display:none } |
Examples
No Focus
Copy
Placeholder Color
Placeholder Color with Opacity
Copy
Hover Text Color
Hover me - Primary
Hover me - Secondary
Hover me - Success
Hover me - Warning
Hover me - Danger
Hover me - Info
Hover me - White
Hover me - Black
Copy
Primary
Secondary
Success
Warning
Danger
Info
White
Black
Hover Outline Color
Hover me - Primary
Hover me - Secondary
Hover me - Success
Hover me - Warning
Hover me - Danger
Hover me - Info
Hover me - White
Hover me - Black
Outline Color with Opacity
Hover me - 0
Hover me - 10
Hover me - 25
Hover me - 50
Hover me - 75
Copy
Primary
Secondary
Success
Warning
Danger
Info
White
Black
Opacity 0
Opacity 10
Opacity 25
Opacity 50
Opacity 75
Hover Rotate
Hover me - 45°
Hover me - 90°
Hover me - 180°
Hover me - 270°
Hover me - 360°
Copy
Rotate 45°
Rotate 90°
Rotate 180°
Rotate 270°
Rotate 360°
Hover Scale
Hover me - 1.15
Scale 1.25
Hover me - 1.75
Hover me - 2
Hover me - 2.5
Copy
Scale 1.15
Scale 1.25
Scale 1.75
Scale 2
Scale 2.5
Hover Glass Effect
Hover me
Copy
Hover me
Hover Child Show / Hide
Hover Background Color
Hover me - Primary
Hover me - Secondary
Hover me - Success
Hover me - Warning
Hover me - Danger
Hover me - Info
Hover me - White
Hover me - Black
Background Color with Opacity
Hover me - 0
Hover me - 10
Hover me - 25
Hover me - 50
Hover me - 75
Copy
Primary
Secondary
Success
Warning
Danger
Info
White
Black
Opacity 0
Opacity 10
Opacity 25
Opacity 50
Opacity 75
Hover Border Color
Hover me - Primary
Hover me - Secondary
Hover me - Success
Hover me - Warning
Hover me - Danger
Hover me - Info
Hover me - White
Hover me - Black
Border Color with Opacity
Hover me - 0
Hover me - 10
Hover me - 25
Hover me - 50
Hover me - 75
Animated Border Gradient
Hover me - Border Gradient
Animated Border Gradient Width
Hover me - 1px
Hover me - 5px
Hover me - 10px
Copy
Primary
Secondary
Success
Warning
Danger
Info
White
Black
Opacity 0
Opacity 10
Opacity 25
Opacity 50
Opacity 75
// Animated Border Gradient
Border gradient
Stop animation on-hover
Border 1px
Border 5px
Border 10px
Fancy Border
Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
Color
Primary
Success
Warning
Danger
Info
Black
White
Hover me!
Hover me!
Hover me!
Hover me!
Size
Default - 20%
10px
20px
30px
40px
50px
Color
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
// Color
Primary
Success
Warning
Danger
Info
Black
White
Hover me!
Hover me!
Hover me!
Hover me!
// Size
Default - 20%
10px
20px
30px
40px
50px
// Color
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Glow
Hover Me
Hover Me
Hover Me
Copy
Default
Pill
Circle
Shadow
Hover Me
Hover Me - Infinite
Color
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
Hover Me
Hover Me - Infinite
// Color
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Stop Animation
Hover me - Stop animation
Copy
Developer Notes
-
All hover states controlled with .al-hover-* classes
-
Color system follows Bootstrap variables and your design tokens
-
Supports rgba opacity directly inside class names
-
Pseudo placeholder fully dynamic with opacity levels
-
No-focus utility removes outlines for custom inputs