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

12
snippets/border-with-top-triangle.md
View File

@ -9,10 +9,10 @@ lastUpdated: 2021-01-07T23:52:15+02:00
Creates a content container with a triangle at the top.
- Use the `:before` and `:after` pseudo-elements to create two triangles.
- Use the `::before` and `::after` pseudo-elements to create two triangles.
- The colors of the two triangles should be the same as the container's `border-color` and the container's `background-color` respectively.
- The `border-width` of the one triangle (`:before`) should be `1px` wider than the other one (`:after`), in order to act as the border.
- The smaller triangle (`:after`) should be `1px` to the right of the larger triangle (`:before`) to allow for its left border to be shown.
- The `border-width` of the one triangle (`::before`) should be `1px` wider than the other one (`::after`), in order to act as the border.
- The smaller triangle (`::after`) should be `1px` to the right of the larger triangle (`::before`) to allow for its left border to be shown.
```html
<div class="container">Border with top triangle</div>
@ -27,8 +27,8 @@ Creates a content container with a triangle at the top.
margin-top: 20px;
}
.container:before,
.container:after {
.container::before,
.container::after {
content: '';
position: absolute;
bottom: 100%;
@ -37,7 +37,7 @@ Creates a content container with a triangle at the top.
border-bottom-color: #dddddd;
}
.container:after {
.container::after {
left: 20px;
border: 10px solid transparent;
border-bottom-color: #ffffff;

4
snippets/box-sizing-reset.md
View File

@ -23,8 +23,8 @@ div {
}
*,
*:before,
*:after {
*::before,
*::after {
box-sizing: inherit;
}

6
snippets/broken-image-fallback.md
View File

@ -11,7 +11,7 @@ firstSeen: 2022-11-04T05:00:00-04:00
Displays an error message when an image fails to load.
- Apply styles to the `img` element as if it was a text container.
- Use the `:before` and `:after` pseudo-elements to display an error message and the image URL. These elements will only be displayed if the image fails to load.
- Use the `::before` and `::after` pseudo-elements to display an error message and the image URL. These elements will only be displayed if the image fails to load.
```html
<img src="https://nowhere.to.be/found.jpg" />
@ -29,13 +29,13 @@ img {
width: 100%;
}
img:before {
img::before {
content: "Sorry, this image is unavailable.";
display: block;
margin-bottom: 8px;
}
img:after {
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;

14
snippets/button-border-animation.md
View File

@ -9,7 +9,7 @@ lastUpdated: 2021-05-24T15:28:52+03:00
Creates a border animation on hover.
- Use the `:before` and `:after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box.
- Use the `::before` and `::after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box.
- Use the `:hover` pseudo-class to extend the `width` of those elements to `100%` on hover and animate the change using `transition`.
```html
@ -26,8 +26,8 @@ Creates a border animation on hover.
position: relative;
}
.animated-border-button:before,
.animated-border-button:after {
.animated-border-button::before,
.animated-border-button::after {
border: 0 solid transparent;
transition: all 0.3s;
content: '';
@ -36,20 +36,20 @@ Creates a border animation on hover.
width: 24px;
}
.animated-border-button:before {
.animated-border-button::before {
border-top: 2px solid #263059;
right: 0;
top: -4px;
}
.animated-border-button:after {
.animated-border-button::after {
border-bottom: 2px solid #263059;
bottom: -4px;
left: 0;
}
.animated-border-button:hover:before,
.animated-border-button:hover:after {
.animated-border-button:hover::before,
.animated-border-button:hover::after {
width: 100%;
}
```

4
snippets/clearfix.md
View File

@ -9,7 +9,7 @@ lastUpdated: 2020-12-30T15:37:37+02:00
Ensures that an element self-clears its children.
- Use the `:after` pseudo-element and apply `content: ''` to allow it to affect layout.
- Use the `::after` pseudo-element and apply `content: ''` to allow it to affect layout.
- Use `clear: both` to make the element clear past both left and right floats.
- For this technique to work properly, make sure there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).
- **Note:** This is only useful if you are using `float` to build layouts. Consider using a more modern approach, such as the flexbox or grid layout.
@ -23,7 +23,7 @@ Ensures that an element self-clears its children.
```
```css
.clearfix:after {
.clearfix::after {
content: '';
display: block;
clear: both;

6
snippets/constant-width-to-height-ratio.md
View File

@ -9,7 +9,7 @@ lastUpdated: 2020-12-30T15:37:37+02:00
Ensures that an element with variable `width` will retain a proportionate `height` value.
- Apply `padding-top` on the `:before` pseudo-element, making the `height` of the element equal to a percentage of its `width`.
- Apply `padding-top` on the `::before` pseudo-element, making the `height` of the element equal to a percentage of its `width`.
- The proportion of `height` to `width` can be altered as necessary. For example a `padding-top` of `100%` will create a responsive square (1:1 ratio).
```html
@ -22,13 +22,13 @@ Ensures that an element with variable `width` will retain a proportionate `heigh
width: 50%;
}
.constant-width-to-height-ratio:before {
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio:after {
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;

4
snippets/counter.md
View File

@ -11,7 +11,7 @@ Creates a custom list counter that accounts for nested list elements.
- Use `counter-reset` to initialize a variable counter (default `0`), the name of which is the value of the attribute (i.e. `counter`).
- Use `counter-increment` on the variable counter for each countable element (i.e. each `<li>`).
- Use `counters()` to display the value of each variable counter as part of the `content` of the `:before` pseudo-element for each countable element (i.e. each `<li>`). The second value passed to it (`'.'`) acts as the delimiter for nested counters.
- Use `counters()` to display the value of each variable counter as part of the `content` of the `::before` pseudo-element for each countable element (i.e. each `<li>`). The second value passed to it (`'.'`) acts as the delimiter for nested counters.
```html
<ul>
@ -34,7 +34,7 @@ ul {
list-style: none;
}
li:before {
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}

6
snippets/custom-radio.md
View File

@ -11,7 +11,7 @@ Creates a styled radio button with animation on state change.
- Create a `.radio-container` and use flexbox to create the appropriate layout for the radio buttons.
- Reset the styles on the `<input>` and use it to create the outline and background of the radio button.
- Use the `:before` element to create the inner circle of the radio button.
- Use the `::before` element to create the inner circle of the radio button.
- Use `transform: scale(1)` and a CSS transition to create an animation effect on state change.
```html
@ -53,7 +53,7 @@ Creates a styled radio button with animation on state change.
transition: all 0.3s ease;
}
.radio-input:before {
.radio-input::before {
content: "";
width: 6px;
height: 6px;
@ -68,7 +68,7 @@ Creates a styled radio button with animation on state change.
border-color: #0077ff;
}
.radio-input:checked:before {
.radio-input:checked::before {
transform: scale(1);
}

4
snippets/display-empty-links.md
View File

@ -11,14 +11,14 @@ Displays the link URL for links with no text.
- Use the `:empty` pseudo-class to select links with no text.
- Use the `:not` pseudo-class to exclude links with text.
- Use the `content` property and the `attr()` function to display the link URL in the `:before` pseudo-element.
- Use the `content` property and the `attr()` function to display the link URL in the `::before` pseudo-element.
```html
<a href="https://30secondsofcode.org"></a>
```
```css
a[href^="http"]:empty:before {
a[href^="http"]:empty::before {
content: attr(href);
}
```

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%;

6
snippets/hover-underline-animation.md
View File

@ -10,7 +10,7 @@ lastUpdated: 2021-10-11T18:44:51+03:00
Creates an animated underline effect when the user hovers over the text.
- Use `display: inline-block` to make the underline span just the width of the text content.
- Use the `:after` pseudo-element with `width: 100%` and `position: absolute` to place it below the content.
- Use the `::after` pseudo-element with `width: 100%` and `position: absolute` to place it below the content.
- Use `transform: scaleX(0)` to initially hide the pseudo-element.
- Use the `:hover` pseudo-class selector to apply `transform: scaleX(1)` and display the pseudo-element on hover.
- Animate `transform` using `transform-origin: left` and an appropriate `transition`.
@ -27,7 +27,7 @@ Creates an animated underline effect when the user hovers over the text.
color: #0087ca;
}
.hover-underline-animation:after {
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
@ -40,7 +40,7 @@ Creates an animated underline effect when the user hovers over the text.
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}

10
snippets/image-overlay-hover.md
View File

@ -9,7 +9,7 @@ lastUpdated: 2021-10-11T18:44:51+03:00
Displays an image overlay effect on hover.
- Use the `:before` and `:after` pseudo-elements for the top and bottom bars of the overlay respectively. Set their `opacity`, `transform` and `transition` to produce the desired effect.
- Use the `::before` and `::after` pseudo-elements for the top and bottom bars of the overlay respectively. Set their `opacity`, `transform` and `transition` to produce the desired effect.
- Use the `<figcaption>` for the text of the overlay. Set `display: flex`, `flex-direction: column` and `justify-content: center` to center the text into the image.
- Use the `:hover` pseudo-selector to update the `opacity` and `transform` of all the elements and display the overlay.
@ -41,8 +41,8 @@ Displays an image overlay effect on hover.
transition: all 0.45s ease;
}
.hover-img:before,
.hover-img:after {
.hover-img::before,
.hover-img::after {
background-color: rgba(0, 0, 0, 0.5);
border-top: 32px solid rgba(0, 0, 0, 0.5);
border-bottom: 32px solid rgba(0, 0, 0, 0.5);
@ -86,8 +86,8 @@ Displays an image overlay effect on hover.
text-transform: uppercase;
}
.hover-img:hover:before,
.hover-img:hover:after {
.hover-img:hover::before,
.hover-img:hover::after {
transform: scale(1);
opacity: 1;
}

4
snippets/mouse-cursor-gradient-tracking.md
View File

@ -38,7 +38,7 @@ A hover effect where the gradient follows the mouse cursor.
position: relative;
}
.mouse-cursor-gradient-tracking:before {
.mouse-cursor-gradient-tracking::before {
--size: 0;
content: '';
position: absolute;
@ -51,7 +51,7 @@ A hover effect where the gradient follows the mouse cursor.
transition: width 0.2s ease, height 0.2s ease;
}
.mouse-cursor-gradient-tracking:hover:before {
.mouse-cursor-gradient-tracking:hover::before {
--size: 200px;
}
```

8
snippets/navigation-list-item-hover-and-focus-effect.md
View File

@ -9,7 +9,7 @@ lastUpdated: 2021-10-11T18:44:51+03:00
Creates a custom hover and focus effect for navigation items, using CSS transformations.
- Use the `:before` pseudo-element at the list item anchor to create a hover effect. Hide it using `transform: scale(0)`.
- Use the `::before` pseudo-element at the list item anchor to create a hover effect. Hide it using `transform: scale(0)`.
- Use the `:hover` and `:focus` pseudo-class selectors to transition the pseudo-element to `transform: scale(1)` and show its colored background.
- Prevent the pseudo-element from covering the anchor element by using `z-index`.
@ -45,7 +45,7 @@ Creates a custom hover and focus effect for navigation items, using CSS transfor
z-index: 0;
}
li a:before {
li a::before {
position: absolute;
content: "";
width: 100%;
@ -58,8 +58,8 @@ li a:before {
transition: transform 0.5s ease-in-out;
}
li a:hover:before,
li a:focus:before {
li a:hover::before,
li a:focus::before {
transform: scale(1);
}
```

4
snippets/overflow-scroll-gradient.md
View File

@ -9,7 +9,7 @@ lastUpdated: 2021-10-13T19:29:39+02:00
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
- Use the `:after` pseudo-element to create a `linear-gradient()` that fades from `transparent` to `white` (top to bottom).
- Use the `::after` pseudo-element to create a `linear-gradient()` that fades from `transparent` to `white` (top to bottom).
- Use `position: absolute`, `width` and `height` to place and size the pseudo-element in its parent.
- Use `pointer-events: none` to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive.
@ -33,7 +33,7 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
position: relative;
}
.overflow-scroll-gradient:after {
.overflow-scroll-gradient::after {
content: '';
position: absolute;
bottom: 0;

4
snippets/shape-separator.md
View File

@ -10,7 +10,7 @@ lastUpdated: 2021-01-04T12:30:40+02:00
Uses an SVG shape to create a separator between two different blocks.
- Use the `:after` pseudo-element to create the separator element.
- Use the `::after` pseudo-element to create the separator element.
- Use `background-image` to add the SVG (a 24x12 triangle) shape via a data URI. The background image will repeat by default, covering the whole area of the pseudo-element.
- Use the `background` of the parent element to set the desired color for the separator.
@ -25,7 +25,7 @@ Uses an SVG shape to create a separator between two different blocks.
background: #9C27B0;
}
.shape-separator:after {
.shape-separator::after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
position: absolute;

6
snippets/toggle-switch.md
View File

@ -10,7 +10,7 @@ lastUpdated: 2020-12-30T15:37:37+02:00
Creates a toggle switch with CSS only.
- Use the `for` attribute to associate the `<label>` with the checkbox `<input>` element.
- Use the `:after` pseudo-element of the `<label>` to create a circular knob for the switch.
- Use the `::after` pseudo-element of the `<label>` to create a circular knob for the switch.
- Use the `:checked` pseudo-class selector to change the position of the knob, using `transform: translateX(20px)` and the `background-color` of the switch.
- Use `position: absolute` and `left: -9999px` to visually hide the `<input>` element.
@ -30,7 +30,7 @@ Creates a toggle switch with CSS only.
transition: all 0.3s;
}
.switch:after {
.switch::after {
content: '';
position: absolute;
width: 18px;
@ -42,7 +42,7 @@ Creates a toggle switch with CSS only.
transition: all 0.3s;
}
input[type='checkbox']:checked + .switch:after {
input[type='checkbox']:checked + .switch::after {
transform: translateX(20px);
}

2
snippets/truncate-text-multiline.md
View File

@ -36,7 +36,7 @@ Truncates text that is longer than one line.
color: #333;
}
.truncate-text-multiline:after {
.truncate-text-multiline::after {
content: '';
position: absolute;
bottom: 0;

4
snippets/typewriter-effect.md
View File

@ -11,7 +11,7 @@ lastUpdated: 2021-05-24T16:03:40+03:00
Creates a typewriter effect animation.
- Define two animations, `typing` to animate the characters and `blink` to animate the caret.
- Use the `:after` pseudo-element to add the caret to the container element.
- Use the `::after` pseudo-element to add the caret to the container element.
- Use JavaScript to set the text for the inner element and set the `--characters` variable containing the character count. This variable is used to animate the text.
- Use `white-space: nowrap` and `overflow: hidden` to make content invisible as necessary.
@ -35,7 +35,7 @@ Creates a typewriter effect animation.
overflow: hidden;
}
.typewriter-effect:after {
.typewriter-effect::after {
content: " |";
animation: blink 1s infinite;
animation-timing-function: step-end;