diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 9c3780f56..a557f582f 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -734,6 +734,28 @@ footer {
   border-top: 1px solid $text-light;
   font-size: $small-font-size;
   padding-top: $line-height / 2;
+
+  .legal {
+    display: inline-block;
+    margin-#{$global-left}: 0;
+
+    &::before {
+      content: "|";
+    }
+
+    li {
+      display: inline-block;
+
+      &::after {
+        content: "|";
+        margin-left: 4px;
+      }
+
+      &:last-child::after {
+        content: none;
+      }
+    }
+  }
 }
 
 // 04. Tags
diff --git a/app/components/layout/footer_component.html.erb b/app/components/layout/footer_component.html.erb
index 979ecc556..4391b0cd0 100644
--- a/app/components/layout/footer_component.html.erb
+++ b/app/components/layout/footer_component.html.erb
@@ -22,11 +22,11 @@
 
   <div class="subfooter row">
     <div class="small-12 medium-8 column">
-      <%= t("layouts.footer.copyright", year: Time.current.year) %>&nbsp;|
-      <ul class="no-bullet inline-block">
-        <li class="inline-block"><%= link_to t("layouts.footer.privacy"), page_path("privacy") %>&nbsp;|</li>
-        <li class="inline-block"><%= link_to t("layouts.footer.conditions"), page_path("conditions") %>&nbsp;|</li>
-        <li class="inline-block"><%= link_to t("layouts.footer.accessibility"), page_path("accessibility") %></li>
+      <%= t("layouts.footer.copyright", year: Time.current.year) %>
+      <ul class="legal">
+        <li><%= link_to t("layouts.footer.privacy"), page_path("privacy") %></li>
+        <li><%= link_to t("layouts.footer.conditions"), page_path("conditions") %></li>
+        <li><%= link_to t("layouts.footer.accessibility"), page_path("accessibility") %></li>
       </ul>
     </div>