:active :: after不起作用(伪类的伪元素)

时间:2020-03-27 16:35:47

标签: css css-selectors pseudo-element pseudo-class

伪元素:: after(或:: before)不适用于伪类:active。

我在检查器中看到在单击时创建了伪元素,但是什么也不做。 有人知道为什么吗?

: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代码在这里:https://jsfiddle.net/Osigot/mqt7nr4e/12/

0 个答案:

没有答案
相关问题