Add divider instead of using :before magic

styles/elements/_sidenav.scss

@@ -26,6 +26,14 @@
 
   }
 
+  .sidenav__divider--small {
+    display: block;
+    width: 4 * $gap;
+    border: 1px solid #D6D7D9;
+    margin-left: 2 * $gap;
+    margin-bottom: $gap;
+  }
+
   .sidenav__link {
     display: block;
     padding: $gap ($gap * 2);
@@ -52,14 +60,6 @@
         @include icon-size(14);
       }
 
-      &:before {
-        content: "";
-        display: block;
-        width: 4 * $gap;
-        border: 1px solid #D6D7D9;
-        margin-left: $gap;
-        margin-bottom: $gap;
-      }
     }
 
     &.sidenav__link--active {

templates/portfolios/base.html

@@ -13,6 +13,7 @@
           ) }}
       {% endfor %}
     </ul>
+    <div class="sidenav__divider--small"></div>
     <a class="sidenav__link sidenav__link--add" href="{{ url_for("task_orders.get_started") }}" title="Fund a New Portfolio">
       <span class="sidenav__link-label">Fund a New Portfolio</span>
       {{ Icon("plus", classes="sidenav__link-icon") }}