@leemeyer/nth-letter 1.0.20 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,6 +39,10 @@ p::nth-letter(2) {
|
|
|
39
39
|
import nthLetter from '@leemeyer/nth-letter';
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
+
## Background
|
|
43
|
+
|
|
44
|
+
This library was inspired by the CSS-Tricks article [_Using a Nonexistent nth-Letter Selector (Now)_](https://css-tricks.com/using-nonexistent-nth-letter-selector-now/).
|
|
45
|
+
|
|
42
46
|
## How it Works
|
|
43
47
|
|
|
44
48
|
The library parses your CSS for `::nth-letter()` selectors, rewrites them to use `:nth-child()` selectors, and splits the text of each matched element into individual `<span>` elements in the Light DOM. This means the characters are fully accessible, inspectable, and styleable with standard CSS — no Shadow DOM required.
|