::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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter fabioladercole

    (@fabioladercole)

    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.