How to combine input after focus pure css

Question

I have an input field that requires specific gradient borders on focus. So, I've created this kind of border as the background color on the block and smaller background on: the after element. It works at the simple block but doesn't work on: focus.

.test:focus:after and .test:after:focus are not working.

Is there any solution?

Answer 1

One method is to create an element that may contain HTML content, such as span, and then apply the::after pseudo-element (or, in CSS 2.1, the:after pseudo-selector) to it.