see-more

assets/css/_home.scss

@@ -115,6 +115,18 @@
 
         }
 
+        .content{
+            position: relative;
+        }
+
+        .see-more{
+            position: absolute;
+            bottom: 0;
+            font-size: var(--fs-small);
+            --hover-bg: var(--color);
+        }
+        
+
 }
 
 
@@ -215,8 +227,8 @@
 
     .see-more{
         display: block;
-            color: var(--color-txt);
+            // color: var(--color-txt);
-            font-weight: bold;
+            // font-weight: bold;
             padding-top: calc(var(--unit)*1.5);
     }
 

assets/css/_see-more.scss

@@ -0,0 +1,26 @@
+.see-more{
+
+    --hover-bg: var(--color-bg);
+    font-weight: 500;
+    color: var(--color-txt);
+    color: currentColor;
+    text-decoration: none;
+    span{ display: none;}
+
+    &::after{ 
+        content: "→";
+        position: relative;
+        display: inline-block;
+        padding-left: 0.75ch;
+        left: 0;
+        transition: left .4s ease-in-out;
+    }
+    &:hover{
+        text-decoration: underline;
+        &::after{
+            left: 0.5ch;
+            text-decoration: underline var(--hover-bg);
+        }
+    }
+}
+

assets/css/_var.scss

@@ -4,6 +4,7 @@
     --font-title: 'Borna', Arial, sans-serif;
     --font: 'Nunito', Arial, sans-serif;
 
+    --fs-small: 11px;
     --fs-normal: 14px;
 
     font-size: 14px;
@@ -21,6 +22,7 @@
     --header-h: 60px;
 
     --white: white;
+    --color-bg: white;
 
 
     --color-violet:          #6e62a4;

assets/style.css

@@ -2,6 +2,7 @@
 :root {
   --font-title: "Borna", Arial, sans-serif;
   --font: "Nunito", Arial, sans-serif;
+  --fs-small: 11px;
   --fs-normal: 14px;
   font-size: 14px;
   --unit: 24px;
@@ -11,6 +12,7 @@
   --radius-btn: 6px;
   --header-h: 60px;
   --white: white;
+  --color-bg: white;
   --color-violet: #6e62a4;
   --color-violet-medium: #9b92c4;
   --color-violet-light: #e1dfec;
@@ -284,6 +286,33 @@ button {
   height: 100%;
 }
 
+.see-more {
+  --hover-bg: var(--color-bg);
+  font-weight: 500;
+  color: var(--color-txt);
+  color: currentColor;
+  text-decoration: none;
+}
+.see-more span {
+  display: none;
+}
+.see-more::after {
+  content: "→";
+  position: relative;
+  display: inline-block;
+  padding-left: 0.75ch;
+  left: 0;
+  transition: left 0.4s ease-in-out;
+}
+.see-more:hover {
+  text-decoration: underline;
+}
+.see-more:hover::after {
+  left: 0.5ch;
+  -webkit-text-decoration: underline var(--hover-bg);
+          text-decoration: underline var(--hover-bg);
+}
+
 .item-nav {
   border: 1px solid var(--color-txt-light);
   border-radius: var(--radius-small);
@@ -418,6 +447,15 @@ button {
   color: var(--color-light);
   font-weight: 500;
 }
+.highlight-block .content {
+  position: relative;
+}
+.highlight-block .see-more {
+  position: absolute;
+  bottom: 0;
+  font-size: var(--fs-small);
+  --hover-bg: var(--color);
+}
 
 .home--section-tool .section--inner {
   display: grid;
@@ -495,8 +533,6 @@ button {
 }
 #home__hero .see-more {
   display: block;
-  color: var(--color-txt);
-  font-weight: bold;
   padding-top: calc(var(--unit) * 1.5);
 }
 

assets/style.scss

@@ -5,6 +5,7 @@
 @use "css/site-nav";
 @use "css/site-footer";
 @use "css/buttons";
+@use "css/see-more";
 
 @use "css/home-item-nav";
 @use "css/home";

index.html

@@ -76,6 +76,7 @@
                         <p class="label">Livret du mois</p>
                         <h3 class="title">Apiaciée de Baumont</h3>
                         <p class="details">45 espèces</p>
+                        <a class="see-more" href="#">Voir le livret<span>→</span></a>
                     </div>
                     <figure><img src="https://botascopia.inria.fr/photos/Crataegus%20monogyna_morphology_vegetative_leaves_leaves_type0_illustration_photo.png"></figure>
             </div>
@@ -107,8 +108,10 @@
                     <div class="content">
                         <p class="label">Espèce du jour</p>
                         <h3 class="title">Charme commun</h3>
-                   
+
-                    <p class="details">Carpinus betulus L. — Betulaceae</p>
+                        <p class="details">Carpinus betulus L. — Betulaceae</p>
+
+                        <a class="see-more" href="#">Voir la fiche de l’espèce<span>→</span></a>
                       </div>
                 <figure><img src="https://botascopia.inria.fr/photos/Frangula%20alnus_morphology_vegetative_type_woody_twig-type_normal_twig-illustration_photo.png"></figure>
             </div>