[text-decor-4] Added example images for percentage insets

Author: SebastianZ

css-text-decor-4/Overview.bs

@@ -915,22 +915,33 @@ Trimming, Expanding, and Shifting Text Decoration Lines: the 'text-decoration-in
 					from the start and end of it.
 				<pre>
 					h1 {
-						text-decoration: underline 0.3em rgb(36 148 187 / 0.25);
+						text-decoration: underline 0.2em rgb(216 148 23);
 						text-decoration-inset: 10%;
 					}
 				</pre>
+
+				This results in the orange underline being inset by 10 percent from the start and end of the headline.
+
+				<img src="images/underline-inset-percentage.png" height="253" width="499"
+					alt="Sample rendering of the underline inset example">
 			</div>
 
 			<div class="example">
-				<p>In this example, the underline is inset 5% of the inline size of each [=box fragment=]
+				<p>In this example, the underline is inset 10% of the inline size of each [=box fragment=]
 					from the end of that fragment.
 				<pre>
 					h1 {
-						text-decoration: underline 0.3em rgb(36 148 187 / 0.25);
-						text-decoration-inset: 0 5%;
+						text-decoration: underline 0.2em rgb(216 148 23);
+						text-decoration-inset: 0 10%;
 						box-decoration-break: clone;
 					}
 				</pre>
+
+				This results in the orange underline of each line being inset by 10 percent from the end.
+
+				<img src="images/underline-inset-percentage-clone.png" height="253" width="499"
+					alt="Sample rendering of the underline inset example">
+				</div>
 			</div>
 
 		<dt><dfn>auto</dfn></dt>