andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tidy up pseudo-element references

Browse Source
This commit is contained in:
Angelos Chalaris
2022-11-05 13:01:58 +02:00
parent 38468678f5
commit 20100fd229
19 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/dynamic-shadow.md
View File

@ -9,7 +9,7 @@ lastUpdated: 2020-12-30T15:37:37+02:00
Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
- Use the `:after` pseudo-element with `position: absolute` and `width` and `height` equal to `100%` to fill the available space in the parent element.
- Use the `::after` pseudo-element with `position: absolute` and `width` and `height` equal to `100%` to fill the available space in the parent element.
- Use `background: inherit` to inherit the `background` of the parent element.
- Use `top` to slightly offset the pseudo-element, `filter: blur()` to create a shadow and `opacity` to make it semi-transparent.
- Use `z-index: 1` on the parent and `z-index: -1` on the pseudo-element to position it behind its parent.
@ -27,7 +27,7 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
z-index: 1;
}
.dynamic-shadow:after {
.dynamic-shadow::after {
content: '';
width: 100%;
height: 100%;