Enforce pseudo element double colon syntax (#13710)

* Update styles to use double colon pseudo element notation

* Add pseudo element double colon notation Stylelint rule

Author: jamesmockett

dotcom-rendering/src/components/ArticleBody.tsx

@@ -58,7 +58,7 @@ const globalOlStyles = () => css`
 	ol:not([data-ignore='global-ol-styling']) {
 		counter-reset: li;
 
-		> li:before {
+		> li::before {
 			${textEgyptian17};
 			line-height: 1.15;
 			content: counter(li);

dotcom-rendering/src/components/BackToTop.tsx

@@ -34,7 +34,7 @@ const link = css`
 `;
 
 const icon = css`
-	:before {
+	::before {
 		position: absolute;
 		top: 6px;
 		bottom: 0;

dotcom-rendering/src/components/Bio.tsx

@@ -37,7 +37,7 @@ const bioStyles = css`
 		display: inline-block;
 		margin-bottom: 0;
 	}
-	ul li:before {
+	ul li::before {
 		display: inline-block;
 		content: '';
 		border-radius: 0.375rem;

dotcom-rendering/src/components/Blocks.amp.tsx

@@ -20,7 +20,7 @@ const adStyle = css`
 	text-align: center;
 	margin: 0 auto 12px;
 
-	:before {
+	::before {
 		content: 'Advertisement';
 		display: block;
 		${textSans12};

dotcom-rendering/src/components/BodyArticle.amp.tsx

@@ -39,7 +39,7 @@ const bulletStyle = (pillar: ArticleTheme) => css`
 		font-size: 1px;
 	}
 
-	.bullet:before {
+	.bullet::before {
 		display: inline-block;
 		content: '';
 		border-radius: 6px;
@@ -79,7 +79,7 @@ const adStyle = css`
 	text-align: center;
 	margin: 4px 0 12px 20px;
 
-	:before {
+	::before {
 		content: 'Advertisement';
 		display: block;
 		${textSans12};

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

@@ -63,7 +63,7 @@ const sublinkHoverStyles = css`
 `;
 
 const topBarStyles = css`
-	:before {
+	::before {
 		border-top: 1px solid ${palette('--card-border-top')};
 		content: '';
 		z-index: 2;

dotcom-rendering/src/components/Discussion/CommentReplyPreview.tsx

@@ -54,7 +54,7 @@ const previewStyle = css`
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	:before {
+	::before {
 		content: '';
 		position: absolute;
 		border-left: ${arrowSize}px solid

dotcom-rendering/src/components/Discussion/Dropdown.tsx

@@ -85,7 +85,7 @@ const firstStyles = css`
 const activeStyles = css`
 	font-weight: bold;
 
-	:after {
+	::after {
 		content: '';
 		border: 2px solid ${schemedPalette('--discussion-accent-text')};
 		border-top: 0px;
@@ -120,12 +120,12 @@ const buttonStyles = css`
 	text-decoration: none;
 
 	:hover {
-		:after {
+		::after {
 			transform: translateY(0) rotate(45deg);
 		}
 	}
 
-	:after {
+	::after {
 		content: '';
 		display: inline-block;
 		width: 5px;
@@ -141,10 +141,10 @@ const buttonStyles = css`
 `;
 
 const expandedStyles = css`
-	:hover:after {
+	:hover::after {
 		transform: translateY(-1px) rotate(-135deg);
 	}
-	:after {
+	::after {
 		transform: translateY(1px) rotate(-135deg);
 	}
 `;

dotcom-rendering/src/components/Discussion/Filters.tsx

@@ -28,7 +28,7 @@ const filterBar = css`
 const dividerStyles = css`
 	position: relative;
 	margin-left: ${space[2]}px;
-	:after {
+	::after {
 		content: '';
 		display: block;
 		width: 1px;

dotcom-rendering/src/components/Discussion/LoadingPicks.tsx

@@ -50,7 +50,7 @@ const pickBoxStyles = css`
 	position: relative;
 	height: 150px;
 
-	:before {
+	::before {
 		content: '';
 		margin-left: ${space[6]}px;
 		position: absolute;