1

Pseudo element ::after (or ::before) doesn't work for pseudo class :active.

I see in inspector that pseudo element is created on click, but doing nothing. Anybody know why?

:root {

 /*COLORS:____________*/
 --accent_A: #FF1066; /* Stroke/Accent Red  */
 --accent_B: #00FF47; /* Fill/ 2nd Accent Green  */
 --accent_C: #00D1FF; /* Stroke/ nice blue corner  */

 --gray_B1: #F7F9FC;  /* Fill/Bg1 Gray */
 --gray_B2: #EDF0F5;  /* Stroke/ Element 1 gray  */
 --gray_A1: #D1D8E4;  /* Other/ basic gray stroke  */
 --gray_A2: #636E82;  /* other/dark gray */
 --gray_C1: #FFEEF4;  /* Fill/ pale red  */

 --text_passive-gray: #8791A3; /* Text/ passive gray  */
 --text_black:#000000;   /* Text/ black */
 --text_white:#ffffff;   /* Text/ white  */


}

.submit_button_A{
    outline: none;
    text-decoration: none !important;
    color: var(--text_white);
    cursor: pointer;
    background-color: var(--accent_B);
    border-radius: 8px;
    transition: .1s cubic-bezier(0.6,0.02,0.03,0.7);
    height: 64px;
    font-weight: 900;
    display: block;
    border: 0;
    border-color: var(--accent_C);
    padding: 0 40px;
}



.submit_button_A:active:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8px;
    border: 4px solid var(--accent_C); 
}
<p class='submit'><input class='submit_button_A h2' type= 'submit' value='Submit'></p>

jsfiddle code here: https://jsfiddle.net/Osigot/mqt7nr4e/12/

Osigot
  • 27
  • 6
  • 3
    While browsers are starting to allow for this in some rare cases, [you cannot use pseudo-elements in ``](https://www.scottohara.me/blog/2014/06/24/pseudo-element-input.html). Use `` instead. – chriskirknielsen Mar 27 '20 at 16:42
  • @chriskirknielsen Thanks a lot! For some reason I was sure that I can use this on ‍♂️ – Osigot Mar 27 '20 at 16:56
  • 2
    It's because :before and :after only works for nodes that can have child nodes. In your case, using a button would work since it can take HTML. – Krzysztof Antosik Mar 27 '20 at 16:56
  • 1
    Does this answer your question? [Can I use a :before or :after pseudo-element on an input field?](https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field) – Krzysztof Antosik Mar 27 '20 at 16:57

0 Answers0