[css-overflow-5] Add :target-before and :target-after pseudo classes w3c#11600 (w3c#12662)

* [css-overflow-5] Add :target-before and :target-after pseudo classes w3c#11600

Author: danielsakhapov

css-overflow-5/Overview.bs

@@ -366,21 +366,62 @@ The 'scroll-marker-group' property</h4>
 	or via the tab key when currently active or when no other ''::scroll-marker'' is active and this is the first marker in the group,
 	ensuring the group has a <a href="https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop">guaranteed tab stop</a>.
 
-<h4 id="active-scroll-marker">
-Selecting The Active Scroll Marker: the '':target-current'' pseudo-class</h4>
+<h4 id="active-before-after-scroll-markers">
+Selecting Scroll Markers: '':target-current'', '':target-before'' and '':target-after'' pseudo-classes</h4>
 
 	Exactly one [=scroll marker=] within each [=scroll marker group=] is determined to be active at a time.
 	Such "active" [=scroll markers=] match the <dfn selector>:target-current</dfn> pseudo-class.
 
-	<div class='example'>
-		The following snippet shows how the link to the currently scrolled section can be highlighted:
+	In addition to the <a>:target-current</a> pseudo-class, this specification introduces the <dfn selector>:target-before</dfn> and <dfn selector>:target-after</dfn> pseudo-classes for use with [=scroll marker=] elements.
+
+	These pseudo-classes match [=scroll marker=]s that are, respectively, before or after the [=active marker=] (the one matching <a>:target-current</a>) within the same [=scroll marker group=], as determined by [=flat tree order=]:
+
+	- <b>:target-before</b> matches all [=scroll marker=]s that precede the [=active marker=] in the flat tree order within the group.
+	- <b>:target-after</b> matches all [=scroll marker=]s that follow the [=active marker=] in the flat tree order within the group.
 
-		<pre highlight=css>
+<div class='example'>
+	The following snippet demonstrates how to style the active scroll marker and scroll markers before and after the currently active one in a table of contents:
+
+	<pre><code highlight="html">
+		&lt;!DOCTYPE HTML&gt;
+		&lt;title&gt;:target-before and :target-after example&lt;/title&gt;
+		&lt;style&gt;
+			ol {
+				background-color: gray;
+				right: 10px;
+				top: 10px;
+				position: fixed;
+				scroll-target-group: auto;
+			}
+			a:target-before {
+				color: #888;
+			}
 			a:target-current {
+				color: red;
 				font-weight: bold;
 			}
-		</pre>
-	</div>
+			a:target-after {
+				color: #444;
+			}
+			.chapter {
+				background: lightgray;
+				height: 60vh;
+				margin: 10px;
+			}
+		&lt;/style&gt;
+		&lt;ol&gt;
+			&lt;li&gt;&lt;a href="#intro"&gt;Introduction&lt;/a&gt;&lt;/li&gt;
+			&lt;li&gt;&lt;a href="#ch1"&gt;Chapter 1&lt;/a&gt;&lt;/li&gt;
+			&lt;li&gt;&lt;a href="#ch2"&gt;Chapter 2&lt;/a&gt;&lt;/li&gt;
+		&lt;/ol&gt;
+		&lt;div id="intro" class="chapter"&gt;Introduction content&lt;/div&gt;
+		&lt;div id="ch1" class="chapter"&gt;Chapter 1 content&lt;/div&gt;
+		&lt;div id="ch2" class="chapter"&gt;Chapter 2 content&lt;/div&gt;
+	</code></pre>
+</div>
+
+<h4 id="active-scroll-markers-calculation">
+Calculating the Active Scroll Marker</h4>
 
 	A scrolling operation might animate towards a particular position
 	(e.g. scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic scrolls)
@@ -456,7 +497,7 @@ Selecting The Active Scroll Marker: the '':target-current'' pseudo-class</h4>
 					Focus |active marker|
 		1. 	Set the <a href="https://open-ui.org/components/focusgroup.explainer/#last-focused-memory">last-focused element</a> of the |group| to |active marker|.
 		1. 	Set the active state of all other [=scroll marker=] elements in |group| to false.
-	</div>
+  </div>
 
 <h4 id="scroll-marker-activation">Activation behavior</h4>