Merge pull request #665 from minvws/fix/361-writing-style-pseudo-sele…

…ctors-and-pseudo-elements fix(docs): writing style pseudo selectors and pseudo elements
minvws · Sep 27, 2024 · 2e5e3e6 · 2e5e3e6
2 parents ac8e81f + e380ce0
commit 2e5e3e6
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/docs/src/routes/(docs)/components/accordion/+page.svelte b/docs/src/routes/(docs)/components/accordion/+page.svelte
@@ -404,17 +404,17 @@
             </ul>
           </li>
           <li>
-            Open en sluit icoon. Keuze uit <code>:before</code> of
-            <code>:after</code>
+            Open en sluit icoon. Keuze uit <code>::before</code> of
+            <code>::after</code>
             <ul>
               <li>
-                <code>:before</code>
+                <code>::before</code>
                 <ul>
                   <li><a href="{base}/documentation/variables#icon">icon</a></li>
                 </ul>
               </li>
               <li>
-                <code>:after</code>
+                <code>::after</code>
                 <ul>
                   <li><a href="{base}/documentation/variables#icon">icon</a></li>
                   <li>

diff --git a/docs/src/routes/(docs)/components/link/+page.svelte b/docs/src/routes/(docs)/components/link/+page.svelte
@@ -47,15 +47,15 @@
 
         <h4>Visueel voorbeeld:</h4>
         <a href="link">Basis</a>
-        <a href="link" class="icon icon-cat">Met <code>:before</code></a>
+        <a href="link" class="icon icon-cat">Met <code>::before</code></a>
         <a href="link" class="icon-after icon-cat"
-          >Met <code>:after</code><span class="icon icon-cat">Kat icoon</span></a
+          >Met <code>::after</code><span class="icon icon-cat">Kat icoon</span></a
         >
 
         <a href="link" class="hover">Hover <code>:hover</code></a>
-        <a href="link" class="hover icon icon-cat">Hover met <code>:before:hover</code></a>
+        <a href="link" class="hover icon icon-cat">Hover met <code>::before:hover</code></a>
         <a href="link" class="hover"
-          >Hover met <code>:before:hover</code> <span class="icon icon-cat"></span></a
+          >Hover met <code>::before:hover</code> <span class="icon icon-cat"></span></a
         >
 
         <a href="link" class="active">Actieve link</a>

diff --git a/docs/src/routes/(docs)/components/navigation/+page.svelte b/docs/src/routes/(docs)/components/navigation/+page.svelte
@@ -49,23 +49,23 @@
         <nav>
           <ul>
             <li><a href="navigation">Basis</a></li>
-            <li><a href="navigation" class="icon icon-cat">Met <code>:before</code></a></li>
+            <li><a href="navigation" class="icon icon-cat">Met <code>::before</code></a></li>
             <li>
               <a href="navigation" class="icon-after icon-cat"
-                >Met <code>:after</code><span class="icon icon-cat">Kat icoon</span></a
+                >Met <code>::after</code><span class="icon icon-cat">Kat icoon</span></a
               >
             </li>
 
             <li><a href="navigation" class="hover">Hover <code>:hover</code></a></li>
 
             <li>
               <a href="navigation" class="hover icon icon-cat"
-                >Hover met <code>:before:hover</code></a
+                >Hover met <code>::before:hover</code></a
               >
             </li>
             <li>
               <a href="navigation" class="hover"
-                >Hover met <code>:before:hover</code> <span class="icon icon-cat"></span></a
+                >Hover met <code>::before:hover</code> <span class="icon icon-cat"></span></a
               >
             </li>
 
@@ -199,12 +199,12 @@
             <li><a href="#nav-a-hover" class="hover">Lorem ipsum</a></li>
             <li>
               <a href="#nav-a-hover" class="hover icon icon-cat"
-                >Hover met <code>:before:hover</code></a
+                >Hover met <code>::before:hover</code></a
               >
             </li>
             <li>
               <a href="#nav-a-hover" class="hover"
-                >Hover met <code>:before:hover</code> <span class="icon icon-cat"></span></a
+                >Hover met <code>::before:hover</code> <span class="icon icon-cat"></span></a
               >
             </li>
           </ul>
@@ -217,8 +217,8 @@
 <nav>
     <ul>
         <li><a href="#" class="hover">Lorem ipsum</a></li>
-        <li><a href="#" class="hover icon icon-cat">Hover met <code>:before:hover</code></a></li>
-        <li><a href="#" class="hover">Hover met <code>:before:hover</code> <span class="icon icon-cat"></span></a></li>
+        <li><a href="#" class="hover icon icon-cat">Hover met <code>::before:hover</code></a></li>
+        <li><a href="#" class="hover">Hover met <code>::before:hover</code> <span class="icon icon-cat"></span></a></li>
     </ul>
 </nav>
 `}
@@ -230,12 +230,12 @@
             <li><a href="#nav-a-active" class="active">Lorem ipsum</a></li>
             <li>
               <a href="#nav-a-active" class="active icon icon-cat"
-                >active met <code>:before:active</code></a
+                >active met <code>::before:active</code></a
               >
             </li>
             <li>
               <a href="#nav-a-active" class="active"
-                >active met <code>:before:active</code> <span class="icon icon-cat"></span></a
+                >active met <code>::before:active</code> <span class="icon icon-cat"></span></a
               >
             </li>
           </ul>
@@ -248,8 +248,8 @@
 <nav>
     <ul>
         <li><a href="#" class="active">Lorem ipsum</a></li>
-        <li><a href="#" class="active icon icon-cat">active met <code>:before:active</code></a></li>
-        <li><a href="#" class="active">active met <code>:before:active</code> <span class="icon icon-cat"></span></a></li>
+        <li><a href="#" class="active icon icon-cat">active met <code>::before:active</code></a></li>
+        <li><a href="#" class="active">active met <code>::before:active</code> <span class="icon icon-cat"></span></a></li>
     </ul>
 </nav>
 `}