diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md index 4957b723e..361bb4591 100644 --- a/snippets/border-with-top-triangle.md +++ b/snippets/border-with-top-triangle.md @@ -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
Border with top triangle
@@ -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; diff --git a/snippets/box-sizing-reset.md b/snippets/box-sizing-reset.md index c39119615..3d8c4f9b1 100644 --- a/snippets/box-sizing-reset.md +++ b/snippets/box-sizing-reset.md @@ -23,8 +23,8 @@ div { } *, -*:before, -*:after { +*::before, +*::after { box-sizing: inherit; } diff --git a/snippets/broken-image-fallback.md b/snippets/broken-image-fallback.md index 59a376210..22d0d0794 100644 --- a/snippets/broken-image-fallback.md +++ b/snippets/broken-image-fallback.md @@ -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 @@ -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; diff --git a/snippets/button-border-animation.md b/snippets/button-border-animation.md index 66f45fc42..7cd02cef1 100644 --- a/snippets/button-border-animation.md +++ b/snippets/button-border-animation.md @@ -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%; } ``` diff --git a/snippets/clearfix.md b/snippets/clearfix.md index 684de1e8e..a5d02de64 100644 --- a/snippets/clearfix.md +++ b/snippets/clearfix.md @@ -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; diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md index fac07116f..8ddb5b9df 100644 --- a/snippets/constant-width-to-height-ratio.md +++ b/snippets/constant-width-to-height-ratio.md @@ -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; diff --git a/snippets/counter.md b/snippets/counter.md index 12f50e230..58ecff9b0 100644 --- a/snippets/counter.md +++ b/snippets/counter.md @@ -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 `
  • `). -- 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 `
  • `). 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 `
  • `). The second value passed to it (`'.'`) acts as the delimiter for nested counters. ```html