[selectors-4][editorial] Unified the spelling of 'pseudo-element(s)' and added references

Author: SebastianZ

css-contain-1/Overview.bs

@@ -534,7 +534,7 @@ Size Containment</h3>
 				The [=used value|used=] 'width' and 'height' of the [=size containment box|containment box=]
 				are determined as if performing a normal layout of the box,
 				except that it is treated as having no content--
-				not even through pseudo elements such as ''::before'', ''::after'', or ''::marker''.
+				not even through [=pseudo-elements=] such as ''::before'', ''::after'', or ''::marker''.
 
 				<wpt>
 				contain-size-021.html
@@ -609,7 +609,7 @@ Size Containment</h3>
 			<dt><dfn>Laying out in-place</dfn>
 			<dd>
 				The [=size containment box|containment box=]'s content
-				(including any pseudo-elements)
+				(including any [=pseudo-elements=])
 				must then be laid out into
 				the now fixed-size [=size containment box|containment box=] normally.
 

css-contain-2/Overview.bs

@@ -626,7 +626,7 @@ Size Containment</h3>
 				The [=used value|used=] 'width' and 'height' of the [=size containment box|containment box=]
 				are determined as if performing a normal layout of the box,
 				except that it is treated as having no content--
-				not even through pseudo elements such as ''::before'', ''::after'', or ''::marker''.
+				not even through [=pseudo-elements=] such as ''::before'', ''::after'', or ''::marker''.
 
 				<wpt>
 				contain-size-021.html
@@ -701,7 +701,7 @@ Size Containment</h3>
 			<dt><dfn>Laying out in-place</dfn>
 			<dd>
 				The [=size containment box|containment box=]'s content
-				(including any pseudo-elements)
+				(including any [=pseudo-elements=])
 				must then be laid out into
 				the now fixed-size [=size containment box|containment box=] normally.
 
@@ -1355,7 +1355,7 @@ Style Containment</h3>
 
 		Here, the style-contained element still interacts with the ''foo'' counter normally,
 		incrementing it to 2.
-		Its ''::before'' pseudo-element,
+		Its ''::before'' [=pseudo-element=],
 		which is effectively a child and thus within the containment boundary,
 		can still see that counter normally,
 		and thus will render the string "<code>2</code>".

css-content-3/Overview.bs

@@ -137,14 +137,14 @@ Inserting and Replacing Content: the 'content' property</h2>
 
 	<p class=all-media>User agents are expected to support this property on all media, including non-visual ones.</p>
 
-	The 'content' property dictates what is rendered inside an element or pseudo-element.
+	The 'content' property dictates what is rendered inside an element or [=pseudo-element=].
 
 	For elements, it has only one purpose:
 	specifying that the element renders as normal,
 	or replacing the element with an image
 	(and possibly some associated "alt text").
 
-	For pseudo-elements and margin boxes,
+	For [=pseudo-elements=] and margin boxes,
 	it is more powerful.
 	It controls whether the element renders at all,
 	can replace the element with an image,
@@ -179,7 +179,7 @@ Inserting and Replacing Content: the 'content' property</h2>
 
 			<pre class=prod><<image>></pre>
 
-			Makes the element or pseudo-element a <a href="https://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced element</a>,
+			Makes the element or [=pseudo-element=] a <a href="https://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced element</a>,
 			filled with the specified <<image>>.
 			Its normal contents are suppressed
 			and do not generate boxes,
@@ -196,7 +196,7 @@ Inserting and Replacing Content: the 'content' property</h2>
 			Note: Replaced elements use different layout rules than normal elements.
 			(In effect, it becomes equivalent to an HTML <{img}> element.)
 
-			Note: Replaced elements do not have ''::before'' or ''::after'' pseudo-elements;
+			Note: Replaced elements do not have ''::before'' or ''::after'' [=pseudo-elements=];
 			the 'content' property replaces their entire contents.
 
 			ISSUE(2889): This value has historically been treated as <<content-list>> on ''::before'' and ''::after''.
@@ -293,7 +293,7 @@ Alternative Text for Accessibility</h3>
 	</div>
 
 	<div class="example">
-		If the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element. Here the ARIA attribute will be spoken as "collapsed". Without the empty string alt value, the content would also be spoken as "Black right-pointing pointer".
+		If the [=pseudo-element=] is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element. Here the ARIA attribute will be spoken as "collapsed". Without the empty string alt value, the content would also be spoken as "Black right-pointing pointer".
 
 		<pre>
 		.expandable::before {
@@ -386,7 +386,7 @@ Elemental Content: the ''contents'' keyword</h3>
 				Note that this is the default,
 				since the initial value of 'content' is ''content/normal''
 				and ''content/normal'' computes to ''content/contents'' on an element.
-			: If set on one of the element's other pseudo-elements:
+			: If set on one of the element's other [=pseudo-elements=]:
 			:: Check to see that it is not set on a "previous" pseudo-element, in the following order, depth first:
 
 				1. the element itself
@@ -409,7 +409,7 @@ Elemental Content: the ''contents'' keyword</h3>
 		</pre>
 
 		...the element's 'content' property would compute to ''content/contents''
-		and the after pseudo element would have no contents
+		and the ''::after'' [=pseudo-element=] would have no contents
 		(equivalent to ''content/none'')
 		and thus would not appear.
 
@@ -1087,7 +1087,7 @@ Naming Strings: the 'string-set' property</h4>
 	Name: string-set
 	Value: none | [ <<custom-ident>> <<string>>+ ]#
 	Initial: none
-	Applies to: all elements, but not pseudo-elements
+	Applies to: all elements, but not [=pseudo-elements=]
 	Inherited: no
 	Percentages: N/A
 	Computed value: the keyword ''string-set/none'' or a list, each item an identifier paired with a list of string values
@@ -1248,16 +1248,16 @@ The ''content()'' function</h4>
 			it acts as if ''content()/text'' were specified.
 
 		<dt><dfn>before</dfn>
-		<dd>The string value of the ''::before'' pseudo-element.
+		<dd>The string value of the ''::before'' [=pseudo-element=].
 
 		<dt><dfn>after</dfn>
-		<dd>The string value of the ''::after'' pseudo-element.
+		<dd>The string value of the ''::after'' [=pseudo-element=].
 
 		<dt><dfn>first-letter</dfn>
-		<dd>The first letter of the element, as defined for the ''::first-letter'' pseudo-element
+		<dd>The first letter of the element, as defined for the ''::first-letter'' [=pseudo-element=]
 
 		<dt><dfn>marker</dfn>
-		<dd>The string value of the ''::marker'' pseudo-element.
+		<dd>The string value of the ''::marker'' [=pseudo-element=].
 	</dl>
 
 	<div class="example">

css-highlight-api-1/Overview.bs

@@ -89,7 +89,7 @@ Introduction</h2>
 	The Custom Highlight API provides a programmatic way of adding and removing highlights
 	that do not affect the underlying DOM structure,
 	but instead applies styles to text based on [=range=] objects,
-	accessed via the ''::highlight()'' pseudo element.
+	accessed via the ''::highlight()'' [=pseudo-element=].
 
 	<div id=intro-ex class=example>
 		The following code uses the ''::highlight()'' pseudo-element
@@ -310,7 +310,7 @@ Styling Custom Highlights</h2>
 <h3 id=custom-highlight-pseudo>
 The Custom Highlight Pseudo-element: ''::highlight()''</h3>
 
-	The ''::highlight()'' pseudo-element
+	The ''::highlight()'' [=pseudo-element=]
 	(also known as the <dfn>custom highlight pseudo-element</dfn>)
 	represents the portion of a document that
 	is being [=contained=] or [=partially contained=]

css-overflow-5/Overview.bs

@@ -148,7 +148,7 @@ Introduction</h2>
 	::
 		This section defines the ability to associate [=scroll markers=]
 		with elements in a scroller
-		(or generate them automatically as ''::scroll-marker'' pseudo-elements,
+		(or generate them automatically as ''::scroll-marker'' [=pseudo-elements=],
 		with automatic user behavior and accessible labels),
 		which can be activated to scroll to the associated elements
 		and reflect the scroller's relative scroll progress
@@ -192,7 +192,7 @@ Scroll navigation controls</h2>
 <h3 id="scroll-markers">
 Scroll markers</h3>
 
-A <dfn>scroll marker</dfn> is any element or pseudo-element with a [=scroll target=].
+A <dfn>scroll marker</dfn> is any element or [=pseudo-element=] with a [=scroll target=].
 An element or pseudo-element's <dfn>scroll target</dfn> is the {{Element}} indicated by the [=scroll marker=].
 Which elements are [=scroll markers=], and what their [=scroll targets=] are, is host-language defined.
 The [[html#the-a-element|HTML &lt;a> element]] and [[svg2#Links|SVG &lt;a> element]]
@@ -218,7 +218,7 @@ Scroll marker grouping</h4>
 
 The 'scroll-target-group' property determines whether an element establishes a <dfn>scroll marker group container</dfn> containing [=scroll marker=] elements forming a [=scroll marker group=].
 
-A ''::scroll-marker-group'' pseudo-element is the [=scroll marker group container=] for its contained ''::scroll-marker'' pseudo-elements, which form a [=scroll marker group=] together.
+A ''::scroll-marker-group'' [=pseudo-element=] is the [=scroll marker group container=] for its contained ''::scroll-marker'' pseudo-elements, which form a [=scroll marker group=] together.
 
 <h4 id="scroll-target-group">
 The 'scroll target group' property</h4>
@@ -299,7 +299,7 @@ The 'scroll-marker-group' property</h4>
 	Canonical Order: per grammar
 	</pre>
 
-	The 'scroll-marker-group' property specifies whether the [=scroll container=] should have a '::scroll-marker-group' pseudo-element created,
+	The 'scroll-marker-group' property specifies whether the [=scroll container=] should have a '::scroll-marker-group' [=pseudo-element=] created,
 	and its position relative to the scroll container.
 
 	<dl dfn-type=value dfn-for=scroll-marker-group>
@@ -334,7 +334,7 @@ The 'scroll-marker-group' property</h4>
 	or immediately following (if ''scroll-marker-group: after'').
 
 	The following additions are recommended for the default UA stylesheet
-	to ensure that the generation of scroll marker pseudo-elements does not invalidate the layout of the site:
+	to ensure that the generation of scroll marker [=pseudo-elements=] does not invalidate the layout of the site:
 
 	<pre class="lang-css">
 		/* The generation of ::scroll-marker pseudo-elements shouldn't
@@ -807,9 +807,9 @@ Channeling Overflow: the 'continue' property</h3>
 		See <a href="#fragment-overflow">fragment overflow</a>.
 	</dl>
 
-	The computed value of the 'continue' for a given element or pseudo element is determined as follow:
+		The computed value of the 'continue' for a given element or [=pseudo-element=] is determined as follow:
 
-	1. On elements or pseudo elements with <a>layout containment</a> (see [[!CSS-CONTAIN-1]]),
+	1. On elements or pseudo-elements with <a>layout containment</a> (see [[!CSS-CONTAIN-1]]),
 		if the specified value is ''continue/auto'' or ''continue/fragments''
 		then the computed value is ''continue/overflow''.
 
@@ -829,7 +829,7 @@ Channeling Overflow: the 'continue' property</h3>
 
 	4. In all other cases, the computed value is the specified value
 
-	Issue: If we introduce a pseudo element that can select columns in a multicol,
+	Issue: If we introduce a pseudo-element that can select columns in a multicol,
 	we would need to specify that auto computes to auto on it,
 	or introduce a new value and have auto compute to that
 	(but what would that value compute to on things that aren't columns?).
@@ -863,7 +863,7 @@ Paginated overflow</h3>
 
 	Issue: Traditional pagination (e.g. when printing) assumes that
 	:root is contained in the page box,
-	rather than having the page box be a pseudo element child of :root.
+	rather than having the page box be a pseudo-element child of :root.
 	Can we work around that using something similar to fragment boxes?
 	Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?
 
@@ -1058,7 +1058,7 @@ Fragmented Overflow</h3>
 <h4 id="fragment-pseudo-element">
 The ''::nth-fragment()'' pseudo-element</h4>
 
-	The <dfn selector>::nth-fragment()</dfn> pseudo-element
+	The <dfn selector>::nth-fragment()</dfn> [=pseudo-element=]
 	is a pseudo-element
 	that describes some of the <a>fragment box</a>es generated by an element.
 	The argument to the pseudo-element takes the same syntax
@@ -1088,7 +1088,7 @@ Styling of fragments</h4>
 	then stricter property restrictions would be needed
 	for continue:paginate.)
 
-	In the absence of rules with ''::nth-fragment()'' pseudo-elements,
+	In the absence of rules with ''::nth-fragment()'' [=pseudo-elements=],
 	the computed style for each <a>fragment box</a>
 	is the computed style for the element
 	for which the <a>fragment box</a> was created.
@@ -1144,7 +1144,7 @@ Styling of fragments</h4>
 		</table>
 	</div>
 
-	Styling an ''::nth-fragment()'' pseudo-element with the 'continue'
+	Styling an ''::nth-fragment()'' [=pseudo-element=] with the 'continue'
 	property does take effect;
 	if a <a>fragment box</a> has a
 	computed value of 'continue' other than ''fragments''
@@ -1174,7 +1174,7 @@ Styling of fragments</h4>
 	applies to block containers, flex containers, and grid containers).
 	<span class="issue">Need to specify exactly how this works</span>
 
-	To match the model for other pseudo-elements
+	To match the model for other [=pseudo-elements=]
 	where the pseudo-elements live inside their corresponding element,
 	declarations in ''::nth-fragment()'' pseudo-elements override
 	declarations in rules without the pseudo-element.
@@ -1233,7 +1233,7 @@ Styling of fragments</h4>
 		Issue: Should this apply to continue:fragments only,
 		or also to continue:paginate?
 
-		The ''::nth-fragment()'' pseudo-element
+		The ''::nth-fragment()'' [=pseudo-element=]
 		can also be used to style
 		content inside of a <a>fragment box</a>.
 		Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,