Extract the arrow into CSS generated decorative content

Author: tut-tuuut

djangoproject/scss/_style.scss

@@ -1345,6 +1345,18 @@ label[for] {
   margin: 10px 0;
 }
 
+.cta.arrow {
+  height: auto;
+  &::after {
+    content: " →" / "";
+  }
+  &:dir(rtl) {
+    &::after {
+      content: " ←" / "";
+    }
+  }
+}
+
 .callout-right {
     @include respond-min(768px) {
         float: right;

djangoproject/templates/contact/foundation.html

@@ -29,7 +29,7 @@ <h1>{% translate "Contact the Django Software Foundation" %}</h1>
       <a href="https://forum.djangoproject.com">Django Forum</a>.
     {% endblocktranslate %}
   </p>
-  <form action="." method="post" accept-charset="utf-8" class="form-input">
+  <form action="." method="post" accept-charset="utf-8">
     {% csrf_token %}
     <div>
       {{ form.name.as_field_group }}
@@ -44,6 +44,8 @@ <h1>{% translate "Contact the Django Software Foundation" %}</h1>
       {{ form.body.as_field_group }}
     </div>
     {{ form.captcha }}
-    <p class="submit"><input type="submit" class="cta" value="{% translate "Send &rarr;" %}"></p>
+    <p class="submit">
+      <button type="submit" class="cta arrow">{% translate "Send" %}</button>
+    </p>
   </form>
 {% endblock %}