Fix before and after selectors

docs/_sass/bsa.sass

@@ -49,7 +49,7 @@
       color: $text-strong
       display: inline
       font-weight: $weight-bold
-      &:after
+      &::after
         content: " — "
     .default-description
       display: inline

docs/_sass/example.sass

@@ -3,7 +3,7 @@
 .bd-snippet
   border: 1px solid $yellow
   position: relative
-  &:before
+  &::before
     background: $yellow
     border-radius: $radius $radius 0 0
     bottom: 100%
@@ -150,14 +150,14 @@ $structure-invert: $danger-invert
   border-color: $structure
   border-radius: $radius
   padding: 1.5rem
-  &:before
+  &::before
     background: $structure
     color: $structure-invert
     content: "Structure"
 
 .bd-structure-item
   position: relative
-  &:before
+  &::before
     +overlay
     background: rgba($black, 0.7)
     background: $background
@@ -165,7 +165,7 @@ $structure-invert: $danger-invert
     content: ""
     display: block
     z-index: 1
-  &:after
+  &::after
     +overlay
     align-items: center
     content: attr(title)
@@ -177,7 +177,7 @@ $structure-invert: $danger-invert
     z-index: 2
   &.bd-is-structure-container
     padding: 1.5rem 0.75rem 0.75rem
-    &:after
+    &::after
       align-items: flex-start
       justify-content: flex-start
       padding: 0.5rem 0.75rem

docs/css/bulma-docs.css

@@ -61,7 +61,7 @@
   width: 20px;
 }
 
-.delete:before, .modal-close:before, .delete:after, .modal-close:after {
+.delete::before, .modal-close::before, .delete::after, .modal-close::after {
   background-color: white;
   content: "";
   display: block;
@@ -72,12 +72,12 @@
   transform-origin: center center;
 }
 
-.delete:before, .modal-close:before {
+.delete::before, .modal-close::before {
   height: 2px;
   width: 50%;
 }
 
-.delete:after, .modal-close:after {
+.delete::after, .modal-close::after {
   height: 50%;
   width: 2px;
 }
@@ -117,7 +117,7 @@
   width: 32px;
 }
 
-.button.is-loading:after, .select.is-loading::after, .control.is-loading::after, .loader, .intro-spinner::before {
+.button.is-loading::after, .select.is-loading::after, .control.is-loading::after, .loader, .intro-spinner::before {
   animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
@@ -131,7 +131,7 @@
 }
 
 .is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
-.bd-article-info, .bd-structure-item:before, .bd-structure-item:after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
+.bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
 .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
   bottom: 0;
   left: 0;
@@ -251,7 +251,7 @@ html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after {
+*, *::before, *::after {
   box-sizing: inherit;
 }
 
@@ -406,7 +406,7 @@ table th {
   color: #363636;
 }
 
-.is-clearfix:after {
+.is-clearfix::after {
   clear: both;
   content: " ";
   display: table;
@@ -1582,7 +1582,7 @@ a.box:active {
   color: white;
 }
 
-.button.is-white.is-loading:after {
+.button.is-white.is-loading::after {
   border-color: transparent transparent #0a0a0a #0a0a0a !important;
 }
 
@@ -1598,7 +1598,7 @@ a.box:active {
   color: #0a0a0a;
 }
 
-.button.is-white.is-outlined.is-loading:after {
+.button.is-white.is-outlined.is-loading::after {
   border-color: transparent transparent white white !important;
 }
 
@@ -1676,7 +1676,7 @@ a.box:active {
   color: #0a0a0a;
 }
 
-.button.is-black.is-loading:after {
+.button.is-black.is-loading::after {
   border-color: transparent transparent white white !important;
 }
 
@@ -1692,7 +1692,7 @@ a.box:active {
   color: white;
 }
 
-.button.is-black.is-outlined.is-loading:after {
+.button.is-black.is-outlined.is-loading::after {
   border-color: transparent transparent #0a0a0a #0a0a0a !important;
 }
 
@@ -1770,7 +1770,7 @@ a.box:active {
   color: whitesmoke;
 }
 
-.button.is-light.is-loading:after {
+.button.is-light.is-loading::after {
   border-color: transparent transparent #363636 #363636 !important;
 }
 
@@ -1786,7 +1786,7 @@ a.box:active {
   color: #363636;
 }
 
-.button.is-light.is-outlined.is-loading:after {
+.button.is-light.is-outlined.is-loading::after {
   border-color: transparent transparent whitesmoke whitesmoke !important;
 }
 
@@ -1864,7 +1864,7 @@ a.box:active {
   color: #363636;
 }
 
-.button.is-dark.is-loading:after {
+.button.is-dark.is-loading::after {
   border-color: transparent transparent whitesmoke whitesmoke !important;
 }
 
@@ -1880,7 +1880,7 @@ a.box:active {
   color: whitesmoke;
 }
 
-.button.is-dark.is-outlined.is-loading:after {
+.button.is-dark.is-outlined.is-loading::after {
   border-color: transparent transparent #363636 #363636 !important;
 }
 
@@ -1958,7 +1958,7 @@ a.box:active {
   color: #00d1b2;
 }
 
-.button.is-primary.is-loading:after {
+.button.is-primary.is-loading::after {
   border-color: transparent transparent #fff #fff !important;
 }
 
@@ -1974,7 +1974,7 @@ a.box:active {
   color: #fff;
 }
 
-.button.is-primary.is-outlined.is-loading:after {
+.button.is-primary.is-outlined.is-loading::after {
   border-color: transparent transparent #00d1b2 #00d1b2 !important;
 }
 
@@ -2052,7 +2052,7 @@ a.box:active {
   color: #3273dc;
 }
 
-.button.is-link.is-loading:after {
+.button.is-link.is-loading::after {
   border-color: transparent transparent #fff #fff !important;
 }
 
@@ -2068,7 +2068,7 @@ a.box:active {
   color: #fff;
 }
 
-.button.is-link.is-outlined.is-loading:after {
+.button.is-link.is-outlined.is-loading::after {
   border-color: transparent transparent #3273dc #3273dc !important;
 }
 
@@ -2146,7 +2146,7 @@ a.box:active {
   color: #209cee;
 }
 
-.button.is-info.is-loading:after {
+.button.is-info.is-loading::after {
   border-color: transparent transparent #fff #fff !important;
 }
 
@@ -2162,7 +2162,7 @@ a.box:active {
   color: #fff;
 }
 
-.button.is-info.is-outlined.is-loading:after {
+.button.is-info.is-outlined.is-loading::after {
   border-color: transparent transparent #209cee #209cee !important;
 }
 
@@ -2240,7 +2240,7 @@ a.box:active {
   color: #23d160;
 }
 
-.button.is-success.is-loading:after {
+.button.is-success.is-loading::after {
   border-color: transparent transparent #fff #fff !important;
 }
 
@@ -2256,7 +2256,7 @@ a.box:active {
   color: #fff;
 }
 
-.button.is-success.is-outlined.is-loading:after {
+.button.is-success.is-outlined.is-loading::after {
   border-color: transparent transparent #23d160 #23d160 !important;
 }
 
@@ -2334,7 +2334,7 @@ a.box:active {
   color: #ffdd57;
 }
 
-.button.is-warning.is-loading:after {
+.button.is-warning.is-loading::after {
   border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important;
 }
 
@@ -2350,7 +2350,7 @@ a.box:active {
   color: rgba(0, 0, 0, 0.7);
 }
 
-.button.is-warning.is-outlined.is-loading:after {
+.button.is-warning.is-outlined.is-loading::after {
   border-color: transparent transparent #ffdd57 #ffdd57 !important;
 }
 
@@ -2428,7 +2428,7 @@ a.box:active {
   color: #ff3860;
 }
 
-.button.is-danger.is-loading:after {
+.button.is-danger.is-loading::after {
   border-color: transparent transparent #fff #fff !important;
 }
 
@@ -2444,7 +2444,7 @@ a.box:active {
   color: #fff;
 }
 
-.button.is-danger.is-outlined.is-loading:after {
+.button.is-danger.is-outlined.is-loading::after {
   border-color: transparent transparent #ff3860 #ff3860 !important;
 }
 
@@ -2503,7 +2503,7 @@ a.box:active {
   pointer-events: none;
 }
 
-.button.is-loading:after {
+.button.is-loading::after {
   position: absolute;
   left: calc(50% - (1em / 2));
   top: calc(50% - (1em / 2));
@@ -4876,7 +4876,7 @@ a.box:active {
   width: 2em;
 }
 
-.tag:not(body).is-delete:before, .tag:not(body).is-delete:after {
+.tag:not(body).is-delete::before, .tag:not(body).is-delete::after {
   background-color: currentColor;
   content: "";
   display: block;
@@ -4887,12 +4887,12 @@ a.box:active {
   transform-origin: center center;
 }
 
-.tag:not(body).is-delete:before {
+.tag:not(body).is-delete::before {
   height: 1px;
   width: 50%;
 }
 
-.tag:not(body).is-delete:after {
+.tag:not(body).is-delete::after {
   height: 50%;
   width: 1px;
 }
@@ -10599,9 +10599,9 @@ svg {
   position: relative;
 }
 
-.bd-example:before,
+.bd-example::before,
-.bd-structure:before,
+.bd-structure::before,
-.bd-snippet:before {
+.bd-snippet::before {
   background: #ffdd57;
   border-radius: 3px 3px 0 0;
   bottom: 100%;
@@ -10784,7 +10784,7 @@ svg {
   padding: 1.5rem;
 }
 
-.bd-structure:before {
+.bd-structure::before {
   background: #ff3860;
   color: #fff;
   content: "Structure";
@@ -10794,7 +10794,7 @@ svg {
   position: relative;
 }
 
-.bd-structure-item:before {
+.bd-structure-item::before {
   background: rgba(10, 10, 10, 0.7);
   background: whitesmoke;
   border: 1px solid #dbdbdb;
@@ -10803,7 +10803,7 @@ svg {
   z-index: 1;
 }
 
-.bd-structure-item:after {
+.bd-structure-item::after {
   align-items: center;
   content: attr(title);
   display: flex;
@@ -10818,7 +10818,7 @@ svg {
   padding: 1.5rem 0.75rem 0.75rem;
 }
 
-.bd-structure-item.bd-is-structure-container:after {
+.bd-structure-item.bd-is-structure-container::after {
   align-items: flex-start;
   justify-content: flex-start;
   padding: 0.5rem 0.75rem;
@@ -11045,7 +11045,7 @@ svg {
   font-weight: 700;
 }
 
-#_default_ > a .default-title:after {
+#_default_ > a .default-title::after {
   content: " — ";
 }
 

sass/base/minireset.sass

@@ -53,8 +53,8 @@ html
 
 *
   &,
-  &:before,
+  &::before,
-  &:after
+  &::after
     box-sizing: inherit
 
 // Media

sass/elements/button.sass

@@ -138,7 +138,7 @@ $button-static-border-color: $grey-lighter !default
           box-shadow: none
           color: $color
       &.is-loading
-        &:after
+        &::after
           border-color: transparent transparent $color-invert $color-invert !important
       &.is-outlined
         background-color: transparent
@@ -150,7 +150,7 @@ $button-static-border-color: $grey-lighter !default
           border-color: $color
           color: $color-invert
         &.is-loading
-          &:after
+          &::after
             border-color: transparent transparent $color $color !important
         &[disabled]
           background-color: transparent
@@ -189,7 +189,7 @@ $button-static-border-color: $grey-lighter !default
   &.is-loading
     color: transparent !important
     pointer-events: none
-    &:after
+    &::after
       +loader
       +center(1em)
       position: absolute !important

sass/elements/tag.sass

@@ -82,8 +82,8 @@ $tag-delete-margin: 1px !default
     padding: 0
     position: relative
     width: 2em
-    &:before,
+    &::before,
-    &:after
+    &::after
       background-color: currentColor
       content: ""
       display: block
@@ -92,10 +92,10 @@ $tag-delete-margin: 1px !default
       top: 50%
       transform: translateX(-50%) translateY(-50%) rotate(45deg)
       transform-origin: center center
-    &:before
+    &::before
       height: 1px
       width: 50%
-    &:after
+    &::after
       height: 50%
       width: 1px
     &:hover,

sass/utilities/mixins.sass

@@ -1,7 +1,7 @@
 @import "initial-variables"
 
 =clearfix
-  &:after
+  &::after
     clear: both
     content: " "
     display: table
@@ -171,8 +171,8 @@
   position: relative
   vertical-align: top
   width: 20px
-  &:before,
+  &::before,
-  &:after
+  &::after
     background-color: $white
     content: ""
     display: block
@@ -181,10 +181,10 @@
     top: 50%
     transform: translateX(-50%) translateY(-50%) rotate(45deg)
     transform-origin: center center
-  &:before
+  &::before
     height: 2px
     width: 50%
-  &:after
+  &::after
     height: 50%
     width: 2px
   &:hover,