Add anchors to titles

Author: saundefined

images/php8/anchor-white.svg

@@ -77,7 +77,7 @@ common_header(message('common_header', $lang));
     </section>
 
     <!-- new features -->
-    <section class="features" id="features">
+    <section class="features">
         <svg aria-hidden="true" width="100%" height="100%" class="features-pattern">
             <defs>
                 <pattern id="features-pattern" width="13" height="13" patternUnits="userSpaceOnUse">
@@ -88,7 +88,7 @@ common_header(message('common_header', $lang));
         </svg>
 
         <div class="features-title">
-            <h2><?= message('key_features', $lang) ?></h2>
+            <h2 id="features"><?= message('key_features', $lang) ?></h2>
             <?= message('key_features_description', $lang) ?>
         </div>
 
@@ -193,9 +193,9 @@ common_header(message('common_header', $lang));
     </section>
 
     <!-- new-uri-extension -->
-    <section id="new-uri-extension" class="before-and-after-container">
+    <section class="before-and-after-container">
         <div class="before-and-after-title-and-description">
-            <h2><?= message('uri_extension_title', $lang) ?></h2>
+            <h2 id="new-uri-extension"><?= message('uri_extension_title', $lang) ?></h2>
             <?= message('uri_extension_description', $lang) ?>
         </div>
 
@@ -241,9 +241,9 @@ var_dump($uri->getHost());
     </section>
 
     <!-- pipe-operator -->
-    <section id="pipe-operator" class="before-and-after-container">
+    <section class="before-and-after-container">
         <div class="before-and-after-title-and-description">
-            <h2><?= message('pipe_operator_title', $lang) ?></h2>
+            <h2 id="pipe-operator"><?= message('pipe_operator_title', $lang) ?></h2>
             <?= message('pipe_operator_description', $lang) ?>
         </div>
 
@@ -301,9 +301,9 @@ var_dump($slug);
     </section>
 
     <!-- clone-with -->
-    <section id="clone-with" class="before-and-after-container">
+    <section class="before-and-after-container">
         <div class="before-and-after-title-and-description">
-            <h2><?= message('clone_with_title', $lang) ?></h2>
+            <h2 id="clone-with"><?= message('clone_with_title', $lang) ?></h2>
             <?= message('clone_with_description', $lang) ?>
         </div>
 
@@ -378,9 +378,9 @@ $transparentBlue = $blue->withAlpha(128);
     </section>
 
     <!-- no-discard-attribute -->
-    <section id="no-discard-attribute" class="before-and-after-container">
+    <section class="before-and-after-container">
         <div class="before-and-after-title-and-description">
-            <h2><?= message('no_discard_title', $lang) ?></h2>
+            <h2 id="no-discard-attribute"><?= message('no_discard_title', $lang) ?></h2>
             <?= message('no_discard_description', $lang) ?>
         </div>
 
@@ -432,9 +432,9 @@ getPhpVersion();
     </section>
 
     <!-- fcc-in-const-expr -->
-    <section id="closures-in-const-expr" class="before-and-after-container">
+    <section class="before-and-after-container">
         <div class="before-and-after-title-and-description">
-            <h2><?= message('fcc_in_const_expr_title', $lang) ?></h2>
+            <h2 id="closures-in-const-expr"><?= message('fcc_in_const_expr_title', $lang) ?></h2>
             <?= message('fcc_in_const_expr_description', $lang) ?>
         </div>
 
@@ -498,9 +498,9 @@ final class PostsController
     </section>
 
     <!-- persistent-curl-share-handles -->
-    <section id="persistent-curl-share-handles" class="before-and-after-container">
+    <section class="before-and-after-container">
         <div class="before-and-after-title-and-description">
-            <h2><?= message('persistent_curl_share_handles_title', $lang) ?></h2>
+            <h2 id="persistent-curl-share-handles"><?= message('persistent_curl_share_handles_title', $lang) ?></h2>
             <?= message('persistent_curl_share_handles_description', $lang) ?>
         </div>
 
@@ -556,9 +556,9 @@ curl_exec($ch);
     </section>
 
     <!-- array-first-and-last-functions -->
-    <section id="array-first-and-last-functions" class="before-and-after-container last">
+    <section class="before-and-after-container last">
         <div class="before-and-after-title-and-description">
-            <h2><?= message('array_first_last_title', $lang) ?></h2>
+            <h2 id="array-first-and-last-functions"><?= message('array_first_last_title', $lang) ?></h2>
             <?= message('array_first_last_description', $lang) ?>
         </div>
 

releases/8.5/release.inc

@@ -69,6 +69,33 @@ code[class*=language-], pre[class*=language-] {
 
 }
 
+.features-title h2,
+.before-and-after-title-and-description h2 {
+    position: relative;
+    overflow: visible;
+    display: inline-block;
+}
+
+.features-title h2 .genanchor,
+.before-and-after-title-and-description h2 .genanchor {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    display: none;
+    margin-left: -30px;
+    height: 30px;
+    width: 30px;
+    background: url("/images/php8/anchor-white.svg") scroll no-repeat left center / 21px 16px transparent;
+    text-decoration: none;
+    border-bottom: none;
+    font-size: 0;
+}
+
+.features-title h2:hover .genanchor,
+.before-and-after-title-and-description h2:hover .genanchor {
+    display: block;
+}
+
 @layer properties {
     @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
         *, :before, :after, ::backdrop {