Title: ::after selector submit button CF7
Last modified: August 16, 2019

---

# ::after selector submit button CF7

 *  [fabioladercole](https://wordpress.org/support/users/fabioladercole/)
 * (@fabioladercole)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/after-selector-submit-button-cf7/)
 * Hello,
 * I’m having some problems with the submit button using CF7. Apparently, I cannot
   put any properties using the ::after selector, my HTML just doesn’t show it.
 * Example:
 * CSS:
 *  .wpcf7-submit {
    position: relative; padding: .3em 1em; border: 2px solid; border-
   radius: 10px; background-color: transparent; font-size: 20px; font-weight: 500;
   line-height: 1.7em !important; color: white; transition: all 300ms ease 0ms; 
   cursor: pointer; }
 *  .wpcf7-submit:hover {
    background-color: rgba(0, 0, 0, .05); padding: .3em 2em.
   3em .7em; border: 2px solid transparent; }
 *  .wpcf7-submit::after {
    transition: all 300ms ease 0ms; position: absolute; 
   margin-left: -1em; opacity: 0; text-shadow: none; font-size: 32px; font-weight:
   400; font-style: normal; font-variant: none; line-height: 1em; text-transform:
   none; content: “\35″; font-family: ETmodules, serif !important; }
 *  .wpcf7-submit:hover::after {
    margin-left: 0; opacity: 1; }
 * HTML:
 * <input type=”submit” value=”Send” class=”wpcf7-form-control wpcf7-submit”>
    <
   span class=”ajax-loader”></span>
 * On the other hand, using the same properties on a normal button, everything is
   OK.
 * Can someone help me?
 * Thank you
    -  This topic was modified 6 years, 9 months ago by [fabioladercole](https://wordpress.org/support/users/fabioladercole/).
    -  This topic was modified 6 years, 9 months ago by [fabioladercole](https://wordpress.org/support/users/fabioladercole/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/after-selector-submit-button-cf7/#post-11840299)
 * Where can we see the website in question?
 *  Thread Starter [fabioladercole](https://wordpress.org/support/users/fabioladercole/)
 * (@fabioladercole)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/after-selector-submit-button-cf7/#post-11874109)
 * Hello Takayuki, thank you for answering me. Unfortunately, I cannot share the
   website’s link ’cause it’s still in development. I am just curious about why 
   I cannot use the ::after selector on a CF7 submit button. Maybe there’s a conflict
   with the ajax-loader?
 * Thank you

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘::after selector submit button CF7’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [fabioladercole](https://wordpress.org/support/users/fabioladercole/)
 * Last activity: [6 years, 9 months ago](https://wordpress.org/support/topic/after-selector-submit-button-cf7/#post-11874109)
 * Status: not resolved