diff --git a/core-blocks/cover-image/editor.scss b/core-blocks/cover-image/editor.scss
index 5389d9039c546c..1f4af11e6603b6 100644
--- a/core-blocks/cover-image/editor.scss
+++ b/core-blocks/cover-image/editor.scss
@@ -1,7 +1,7 @@
 .wp-block-cover-image {
 	margin: 0;
 
-	.editor-rich-text__tinymce[data-is-empty="true"]:before {
+	.editor-rich-text__tinymce[data-is-empty="true"]::before {
 		position: inherit;
 	}
 
diff --git a/core-blocks/cover-image/style.scss b/core-blocks/cover-image/style.scss
index e70ea4b69d9bfe..f61cea278841f1 100644
--- a/core-blocks/cover-image/style.scss
+++ b/core-blocks/cover-image/style.scss
@@ -52,7 +52,7 @@
 		background-attachment: fixed;
 	}
 
-	&.has-background-dim:before {
+	&.has-background-dim::before {
 		content: '';
 		position: absolute;
 		top: 0;
@@ -63,7 +63,7 @@
 	}
 
 	@for $i from 1 through 10 {
-		&.has-background-dim.has-background-dim-#{ $i * 10 }:before {
+		&.has-background-dim.has-background-dim-#{ $i * 10 }::before {
 			background-color: rgba( $black, $i * 0.1 );
 		}
 	}
diff --git a/core-blocks/freeform/editor.scss b/core-blocks/freeform/editor.scss
index 32a8828345ad4f..26b5a07935f03d 100644
--- a/core-blocks/freeform/editor.scss
+++ b/core-blocks/freeform/editor.scss
@@ -115,7 +115,7 @@
 }
 
 .editor-block-list__layout .editor-block-list__block[data-type="core/freeform"] {
-	.editor-block-list__block-edit:before {
+	.editor-block-list__block-edit::before {
 		outline: $border-width solid #e2e4e7;
 	}
 
@@ -150,7 +150,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 	background: #f5f5f5;
 	border-bottom: $border-width solid #e2e4e7;
 
-	&:before {
+	&::before {
 		font-family: $default-font;
 		font-size: $default-font-size;
 		content: attr( data-placeholder );
diff --git a/core-blocks/more/editor.scss b/core-blocks/more/editor.scss
index 49b64a58ea41d7..180ee3c8d369aa 100644
--- a/core-blocks/more/editor.scss
+++ b/core-blocks/more/editor.scss
@@ -31,13 +31,13 @@
 	}
 
 	// Dashed line
-	&:before {
+	&::before {
 		content: '';
 		position: absolute;
 		top: calc( 50% );
 		left: 0;
 		right: 0;
 		border-top: 3px dashed $light-gray-700;
-		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
+		z-index: z-index( '.editor-block-list__block .wp-block-more::before' );
 	}
 }
diff --git a/core-blocks/nextpage/editor.scss b/core-blocks/nextpage/editor.scss
index aed6a2db0c22f9..4956abfa477907 100644
--- a/core-blocks/nextpage/editor.scss
+++ b/core-blocks/nextpage/editor.scss
@@ -23,13 +23,13 @@
 	}
 
 	// Dashed line
-	&:before {
+	&::before {
 		content: '';
 		position: absolute;
 		top: calc( 50% );
 		left: 0;
 		right: 0;
 		border-top: 3px dashed $light-gray-700;
-		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
+		z-index: z-index( '.editor-block-list__block .wp-block-more::before' );
 	}
 }
diff --git a/core-blocks/pullquote/editor.scss b/core-blocks/pullquote/editor.scss
index 6b69e630e962b1..9dbd2bcffdf8bd 100644
--- a/core-blocks/pullquote/editor.scss
+++ b/core-blocks/pullquote/editor.scss
@@ -1,7 +1,7 @@
 .editor-block-list__block[data-type="core/pullquote"] {
 	&[data-align="left"],
 	&[data-align="right"] {
-		& .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
+		& .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 		& .editor-rich-text p {
 			font-size: 20px;
 		}
@@ -13,18 +13,18 @@
 		display: block;
 	}
 
-	cite .editor-rich-text__tinymce[data-is-empty="true"]:before {
+	cite .editor-rich-text__tinymce[data-is-empty="true"]::before {
 		font-size: 14px;
 		font-family: $default-font;
 	}
 
-	.editor-rich-text__tinymce[data-is-empty="true"]:before {
+	.editor-rich-text__tinymce[data-is-empty="true"]::before {
 		width: 100%;
 		left: 50%;
 		transform: translateX( -50% );
 	}
 
-	& > .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
+	& > .core-blocks-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 	& > .editor-rich-text p {
 		font-size: 24px;
 		line-height: 1.6;
diff --git a/core-blocks/separator/style.scss b/core-blocks/separator/style.scss
index 609109224f1ef7..6a17542d8cd928 100644
--- a/core-blocks/separator/style.scss
+++ b/core-blocks/separator/style.scss
@@ -14,7 +14,7 @@
 		line-height: 1;
 		height: auto;
 
-		&:before {
+		&::before {
 			content: '\00b7 \00b7 \00b7';
 			color: $dark-gray-700;
 			font-size: 20px;
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index ae0017db96cc37..d927b42813520a 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -3,9 +3,9 @@
 // value is designed to work with).
 
 $z-layers: (
-	'.editor-block-list__block-edit:before': 0,
+	'.editor-block-list__block-edit::before': 0,
 	'.editor-block-switcher__arrow': 1,
-	'.editor-block-list__block .wp-block-more:before': -1,
+	'.editor-block-list__block .wp-block-more::before': -1,
 	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
 	'.freeform-toolbar': 10,
@@ -14,7 +14,7 @@ $z-layers: (
 	'.editor-inserter__tabs': 1,
 	'.editor-inserter__tab.is-active': 1,
 	'.components-panel__header': 1,
-	'.edit-post-meta-boxes-area.is-loading:before': 1,
+	'.edit-post-meta-boxes-area.is-loading::before': 1,
 	'.edit-post-meta-boxes-area .spinner': 5,
 	'.editor-block-contextual-toolbar': 21,
 	'.components-popover__close': 5,
diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
index 291ef14576593b..0ef54263a80e9a 100644
--- a/edit-post/assets/stylesheets/main.scss
+++ b/edit-post/assets/stylesheets/main.scss
@@ -79,7 +79,7 @@ body.gutenberg-editor-page {
 	box-sizing: border-box;
 
 	*,
-	*:before,
+	*::before,
 	*:after {
 		box-sizing: inherit;
 	}
diff --git a/edit-post/components/meta-boxes/meta-boxes-area/style.scss b/edit-post/components/meta-boxes/meta-boxes-area/style.scss
index d2b2839cd4ba8a..113abbbb12fdf9 100644
--- a/edit-post/components/meta-boxes/meta-boxes-area/style.scss
+++ b/edit-post/components/meta-boxes/meta-boxes-area/style.scss
@@ -57,7 +57,7 @@
 		width: 44px;
 	}
 
-	&.is-loading:before {
+	&.is-loading::before {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -65,7 +65,7 @@
 		bottom: 0;
 		content: '';
 		background: transparent;
-		z-index: z-index( '.edit-post-meta-boxes-area.is-loading:before');
+		z-index: z-index( '.edit-post-meta-boxes-area.is-loading::before');
 	}
 
 	.spinner {
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 316d4df7ee9f77..ea48cd27c12b41 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -86,7 +86,7 @@ $color-palette-circle-spacing: 14px;
 	left: 0;
 	bottom: 0;
 	right: 0;
-	&:before {
+	&::before {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -117,7 +117,7 @@ $color-palette-circle-spacing: 14px;
 	overflow: hidden;
 }
 
-.components-color-palette__custom-color .components-color-palette__custom-color-gradient:before {
+.components-color-palette__custom-color .components-color-palette__custom-color-gradient::before {
 	content: '';
 	filter: blur( 6px ) saturate( 0.7 ) brightness( 1.1 );
 	display: block;
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index c28124c794af5e..fa53a1040e4a08 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -17,7 +17,7 @@
 			color: $white;
 		}
 
-		&:focus:before {
+		&:focus::before {
 			top: -3px;
 			right: -3px;
 			bottom: -3px;
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index 0d48891af26259..fd7e59500910f9 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -81,7 +81,7 @@ $toggle-border-width: 2px;
 			transform: translateX( $toggle-width - ( $toggle-border-width * 4 ) - ( $toggle-height - ( $toggle-border-width * 4 ) ) );
 		}
 
-		&:before {
+		&::before {
 			background-color: theme( toggle );
 			border: $toggle-border-width solid theme( toggle );
 		}
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index 024d9e07b984e2..889e129a1d289e 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -15,7 +15,7 @@ $arrow-size: 8px;
 	&:not(.is-without-arrow):not(.is-mobile) {
 		margin-left: 2px;
 
-		&:before {
+		&::before {
 			border: $arrow-size solid $light-gray-500;
 		}
 
@@ -23,7 +23,7 @@ $arrow-size: 8px;
 			border: $arrow-size solid $white;
 		}
 
-		&:before,
+		&::before,
 		&:after {
 			content: "";
 			position: absolute;
@@ -35,7 +35,7 @@ $arrow-size: 8px;
 		&.is-top {
 			margin-top: - $arrow-size;
 
-			&:before {
+			&::before {
 				bottom: - $arrow-size;
 			}
 
@@ -43,7 +43,7 @@ $arrow-size: 8px;
 				bottom: -6px;
 			}
 
-			&:before,
+			&::before,
 			&:after {
 				border-bottom: none;
 				border-left-color: transparent;
@@ -56,7 +56,7 @@ $arrow-size: 8px;
 		&.is-bottom {
 			margin-top: $arrow-size;
 
-			&:before {
+			&::before {
 				top: -$arrow-size;
 			}
 
@@ -64,7 +64,7 @@ $arrow-size: 8px;
 				top: -6px;
 			}
 
-			&:before,
+			&::before,
 			&:after {
 				border-bottom-style: solid;
 				border-left-color: transparent;
@@ -78,7 +78,7 @@ $arrow-size: 8px;
 			/*!rtl:begin:ignore*/
 			margin-left: -$arrow-size;
 
-			&:before {
+			&::before {
 				right: -$arrow-size;
 			}
 
@@ -86,7 +86,7 @@ $arrow-size: 8px;
 				right: -6px;
 			}
 
-			&:before,
+			&::before,
 			&:after {
 				border-bottom-color: transparent;
 				border-left-style: solid;
@@ -100,7 +100,7 @@ $arrow-size: 8px;
 			/*!rtl:begin:ignore*/
 			margin-left: $arrow-size;
 
-			&:before {
+			&::before {
 				left: -$arrow-size;
 			}
 
@@ -108,7 +108,7 @@ $arrow-size: 8px;
 				left: -6px;
 			}
 
-			&:before,
+			&::before,
 			&:after {
 				border-bottom-color: transparent;
 				border-left: none;
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
index 6a3107cb1d788f..21097d5233680a 100644
--- a/packages/components/src/toolbar/style.scss
+++ b/packages/components/src/toolbar/style.scss
@@ -25,7 +25,7 @@ div.components-toolbar {
 			overflow: visible;
 		}
 
-		&.has-left-divider:before {
+		&.has-left-divider::before {
 			display: inline-block;
 			content: '';
 			box-sizing: content-box;
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index 83af1a0350795c..4f4b7e6aafef55 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -1,7 +1,7 @@
 .components-tooltip.components-popover {
 	z-index: z-index( '.components-tooltip' );
 
-	&:before {
+	&::before {
 		border-color: transparent;
 	}
 
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 4f86b9100d7b20..3e1e7e16c510e2 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -190,8 +190,8 @@
 	.editor-block-list__block-edit {
 		position: relative;
 
-		&:before {
-			z-index: z-index( '.editor-block-list__block-edit:before' );
+		&::before {
+			z-index: z-index( '.editor-block-list__block-edit::before' );
 			content: '';
 			position: absolute;
 			outline: $border-width solid transparent;
@@ -212,7 +212,7 @@
 		}
 
 		// Show smaller padding for child blocks.
-		.editor-block-list__block-edit:before {
+		.editor-block-list__block-edit::before {
 			right: -$block-padding;
 			left: -$block-padding;
 			top: -$block-padding;
@@ -221,8 +221,8 @@
 	}
 
 	// Selected style
-	&.is-selected-parent > .editor-block-list__block-edit:before,
-	&.is-selected > .editor-block-list__block-edit:before {
+	&.is-selected-parent > .editor-block-list__block-edit::before,
+	&.is-selected > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		outline: $border-width solid $dark-opacity-light-500;
 
@@ -232,7 +232,7 @@
 	}
 
 	// Hover style
-	&.is-hovered > .editor-block-list__block-edit:before {
+	&.is-hovered > .editor-block-list__block-edit::before {
 		outline: $border-width solid theme( outlines );
 	}
 }
@@ -256,7 +256,7 @@
 		background-color: transparent;
 	}
 
-	&.is-multi-selected .editor-block-list__block-edit:before {
+	&.is-multi-selected .editor-block-list__block-edit::before {
 		background: $blue-medium-highlight;
 
 		// Use opacity to work in various editor styles.
@@ -290,7 +290,7 @@
 		}
 	}
 
-	&.has-warning:not( .is-hovered ) .editor-block-list__block-edit:before {
+	&.has-warning:not( .is-hovered ) .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		outline-color: $dark-opacity-light-500;
 
@@ -351,7 +351,7 @@
 
 		// Hide block outline when an image is floated.
 		.editor-block-list__block-edit {
-			&:before {
+			&::before {
 				content: none;
 			}
 		}
@@ -408,7 +408,7 @@
 			width: auto;
 			z-index: inherit;
 
-			&:before {
+			&::before {
 				content: none;
 			}
 		}
@@ -494,7 +494,7 @@
 			}
 		}
 
-		> .editor-block-list__block-edit:before {
+		> .editor-block-list__block-edit::before {
 			left: 0;
 			right: 0;
 			border-left-width: 0;
@@ -988,7 +988,7 @@
 	}
 }
 
-.editor-block-list__descendant-arrow:before {
+.editor-block-list__descendant-arrow::before {
 	content: '→';
 	display: inline-block;
 	padding: 0 4px;
@@ -1005,7 +1005,7 @@
 		// the mouse cursor is technically outside the block.
 		// This improves usability by making it possible to click somewhat outside
 		// the block and select it. (eg. A fuzzy click target.)
-		&:before {
+		&::before {
 			bottom: 0;
 			content: '';
 			left: -$parent-block-padding - $block-padding;
@@ -1018,13 +1018,13 @@
 		// It should only applies to top-level blocks; applying this rule to
 		// nested blocks will result in difficult-to-use and possibly overlapping
 		// click targets.
-		& &:before {
+		& &::before {
 			left: 0;
 			right: 0;
 		}
 
 		// Don't use this for full-wide blocks, as there's no clearance to accommodate extra area on the side.
-		&[data-align="full"]:before {
+		&[data-align="full"]::before {
 			content: none;
 		}
 	}
diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss
index 15e5e74557cc2b..cae9acd6a37150 100644
--- a/packages/editor/src/components/block-settings-menu/style.scss
+++ b/packages/editor/src/components/block-settings-menu/style.scss
@@ -51,7 +51,7 @@
 
 // Popout menu
 .editor-block-settings-menu__popover {
-	&:before,
+	&::before,
 	&:after {
 		margin-left: 2px;
 	}
diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss
index f4470fcdaa47e7..784dcf7b03e878 100644
--- a/packages/editor/src/components/document-outline/style.scss
+++ b/packages/editor/src/components/document-outline/style.scss
@@ -11,28 +11,28 @@
 	display: flex;
 	margin: 4px 0;
 
-	.document-outline__emdash:before {
+	.document-outline__emdash::before {
 		color: $light-gray-500;
 		margin-right: 4px;
 	}
 
-	&.is-h2 .document-outline__emdash:before {
+	&.is-h2 .document-outline__emdash::before {
 		content: '—';
 	}
 
-	&.is-h3 .document-outline__emdash:before {
+	&.is-h3 .document-outline__emdash::before {
 		content: '——';
 	}
 
-	&.is-h4 .document-outline__emdash:before {
+	&.is-h4 .document-outline__emdash::before {
 		content: '———';
 	}
 
-	&.is-h5 .document-outline__emdash:before {
+	&.is-h5 .document-outline__emdash::before {
 		content: '————';
 	}
 
-	&.is-h6 .document-outline__emdash:before {
+	&.is-h6 .document-outline__emdash::before {
 		content: '—————';
 	}
 }
diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss
index 7b84c5769a6d7e..95fa90e0d2c343 100644
--- a/packages/nux/src/components/dot-tip/style.scss
+++ b/packages/nux/src/components/dot-tip/style.scss
@@ -2,7 +2,7 @@ $dot-size: 8px; // Size of the indicator dot
 $dot-scale: 3;  // How much the pulse animation should scale up by in size
 
 .nux-dot-tip {
-	&:before,
+	&::before,
 	&:after {
 		border-radius: 100%;
 		content: ' ';
@@ -10,7 +10,7 @@ $dot-scale: 3;  // How much the pulse animation should scale up by in size
 		position: absolute;
 	}
 
-	&:before {
+	&::before {
 		animation: nux-pulse 1.6s infinite cubic-bezier( 0.17, 0.67, 0.92, 0.62 );
 		background: rgba( $blue-medium-800, 0.9 );
 		height: $dot-size * $dot-scale;