Extract placeholder selector to style a tag

So we can use it in more places.

app/assets/stylesheets/layout.scss

@@ -927,25 +927,11 @@ footer {
 // 04. Tags
 // --------
 
-.tags a ,
 .tag-cloud a,
 .categories a,
 .geozone a,
-.sdg-goal-tag-list .more-goals,
+.sidebar-links a {
-.sidebar-links a,
+  @extend %tag;
-.tags span {
-  background: #ececec;
-  border-radius: rem-calc(6);
-  color: $text;
-  display: inline-block;
-  font-size: $small-font-size;
-  margin-bottom: $line-height / 3;
-  padding: $line-height / 4 $line-height / 3;
-  text-decoration: none;
-
-  &:hover {
-    background: #e0e0e0;
-  }
 }
 
 .categories a,

app/assets/stylesheets/mixins.scss

@@ -252,4 +252,25 @@
     display: inline-block;
     margin-bottom: 0;
   }
+
+  a,
+  span {
+    @extend %tag;
+  }
+}
+
+%tag {
+  background: #ececec;
+  border-radius: rem-calc(6);
+  color: $text;
+  display: inline-block;
+  font-size: $small-font-size;
+  margin-bottom: $line-height / 3;
+  padding: $line-height / 4 $line-height / 3;
+  text-decoration: none;
+
+  &:hover {
+    background: #e0e0e0;
+    text-decoration: none;
+  }
 }

app/assets/stylesheets/sdg/goals/tag_list.scss

@@ -1,3 +1,7 @@
 .sdg-goal-tag-list {
   @extend %sdg-goal-list;
+
+  .more-goals {
+    @extend %tag;
+  }
 }