Change :before pseudo-element to :after

As discussed here: https://github.com/zurb/foundation/issues/4960 the :after pseudo-element would be more semantically correct.

diff --git a/scss/foundation/components/_dropdown-buttons.scss b/scss/foundation/components/_dropdown-buttons.scss
index d6bcc6698642e4b9e5cc50cc481f4a9900c27f97..e884119b73bc6992c817676f46f9b64530184891 100644 (file)
--- a/scss/foundation/components/_dropdown-buttons.scss
+++ b/scss/foundation/components/_dropdown-buttons.scss
@@ -59,7 +59,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
     position: relative;
 
     // This creates the base styles for the triangle pip
-    &:before {
+    &:after {
       position: absolute;
       content: "";
       width: 0;
@@ -84,7 +84,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with small buttons, use these styles
   @if $padding == small {
     padding-#{$opposite-direction}: $dropdown-button-padding-sml;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-sml;
       #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
       margin-top: $dropdown-button-pip-top-sml;
@@ -94,7 +94,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with default (medium) buttons, use these styles
   @if $padding == medium {
     padding-#{$opposite-direction}: $dropdown-button-padding-med;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-med;
       #{$opposite-direction}: $dropdown-button-pip-opposite-med;
       margin-top: $dropdown-button-pip-top-med;
@@ -104,7 +104,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with large buttons, use these styles
   @if $padding == large {
     padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-lrg;
       #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
       margin-top: $dropdown-button-pip-top-lrg;
@@ -113,7 +113,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
 
   // We can control the pip color. We didn't use logic in this case, just set it and forget it.
   @if $pip-color {
-    &:before { border-color: $pip-color transparent transparent transparent; }
+    &:after { border-color: $pip-color transparent transparent transparent; }
   }
 }
 
@@ -123,7 +123,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
       &.tiny { @include dropdown-button(tiny,$base-style:false); }
       &.small { @include dropdown-button(small,$base-style:false); }
       &.large { @include dropdown-button(large,$base-style:false); }
-      &.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
+      &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
     }
   }
 }