1 <p>We still need to liven up the decorative selection effect.</p>

2 <p>In the initial state, there is no selection, so the first thing we need to do is change its width to zero. In order to allow the decorative selection effect to appear when the input field receives the focus, use the CSS rule with these selectors:</p>

3 input:focus ~ .label-box::before, input:valid ~ .label-box::after { ... }<p>And in this rule, set the desired width of the border parts.</p>

4 <p>In order to allow the selection to appear and disappear smoothly, we need to set a smooth transition for both of its parts in this rule:</p>

5 .label-box::before, .label-box::after { ... }