Cannot get the right position in css-CodePudding

I've been at this for the whole day already. I am creating an animation to wrap my whole input text as soon as it gets a focus. This is how it looks at the beginning

Then, as soon as I focus on it, an animation should occur that will wrap my whole input box with green border. So the end result should color the whole border of the input box green. But with my css, the top border overshoots the my inputbox like so:

This is my HTML and CSS:

@import url('https://fonts.googleapis.com/css?family=Damion|Muli:400,600');

input[type="text"] {
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
}

.effect-8
{
    border: 1px solid #ccc;
    padding: 7px 14px 9px;
    transition: 0.4s;
}
    /*top*/
    .effect-8 ~ .focus-border:before,
    /*bottom*/
    .effect-8 ~ .focus-border:after 
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #4caf50;
        transition: 0.3s;
    }

    /*bottom*/
    .effect-8 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        right: 0;
    }

    /*left*/
    .effect-8 ~ .focus-border i:before,
    /*right*/
    .effect-8 ~ .focus-border i:after 
     {
        content: "";
        position: absolute;
        top: 0;
        left: 15px;
        width: 2px;
        height: 0;
        background-color: #4caf50;
        transition: 0.4s;
    }

    .effect-8 ~ .focus-border i:after {
        left: auto;
        right: 15px;
        top: auto;
        bottom: 0;
    }

    .effect-8:focus ~ .focus-border:before,
    .effect-8:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.3s;
    }

    .effect-8:focus ~ .focus-border i:before,
    .effect-8:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.4s;
    }

<div >
        <div >
            <div  style="width:100%;">
                <h2>Input Textbox</h2>
                <div >
                    <div >
                        <h4><i>Border Effects</i></h4>
                    </div>
          
                    <div   style="position: relative">
                        <input  type="text" placeholder="Input">
                        <span >
                            <i></i>
                        </span>
                    </div>
                  
                </div>
           
            </div>
        </div>
    </div>

CodePudding user response：

Set (position: relative) on the parent (col-3)

CodePudding user response：

You're creating the border animation via an absolute positioning, bit haven't set the parent to be relative, which is why it's overflowing across the whole page. Secondly, the left and right border elements have a left and right value of 15px, which is why they're not flush with the edge of the input.

See below: (additional CSS that needs adding is at the bottom)

@import url('https://fonts.googleapis.com/css?family=Damion|Muli:400,600');

input[type="text"] {
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
}


.effect-8
{
    border: 1px solid #ccc;
    padding: 7px 14px 9px;
    transition: 0.4s;
}
    /*top*/
    .effect-8 ~ .focus-border:before,
    /*bottom*/
    .effect-8 ~ .focus-border:after 
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #4caf50;
        transition: 0.3s;
    }

    /*bottom*/
    .effect-8 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        right: 0;
    }

    /*left*/
    .effect-8 ~ .focus-border i:before,
    /*right*/
    .effect-8 ~ .focus-border i:after 
     {
        content: "";
        position: absolute;
        top: 0;
        width: 2px;
        height: 0;
        background-color: #4caf50;
        transition: 0.4s;
    }

    .effect-8 ~ .focus-border i:after {
        left: auto;
        top: auto;
        bottom: 0;
    }

    .effect-8:focus ~ .focus-border:before,
    .effect-8:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.3s;
    }

    .effect-8:focus ~ .focus-border i:before,
    .effect-8:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.4s;
    }
   
/* Add these styles */
/* Add these styles */
.col-3 {
  position:relative;
  padding:0;
}
.focus-border i::before {
  left: 0;
}
.focus-border i::after {
  right:0;
}

<div >
        <div >
            <div  style="width:100%;">
                <h2>Input Textbox</h2>
                <div >
                    <div >
                        <h4><i>Border Effects</i></h4>
                    </div>
          
                    <div >
                        <input  type="text" placeholder="Input">
                        <span >
                            <i></i>
                        </span>
                    </div>
                  
                </div>
           
            </div>
        </div>
    </div>