无法在css中获得正确的位置[重复]

Question

我已经在这玩了一整天了。我正在创建一个动画来包装我的整个输入文本，一旦它获得焦点。开头是这样的

然后，当我专注于它时，应该会出现一个动画，它将用绿色边框包裹我的整个输入框。所以最终结果应该将输入框的整个边框涂成绿色。但是对于我的 css，顶部边框超出了我的输入框，如下所示：

这是我的 HTML 和 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 class="row">
        <div class="col-sm">
            <div class="box cyan" style="width:100%;">
                <h2>Input Textbox</h2>
                <div class="row">
                    <div class="col-12">
                        <h4><i>Border Effects</i></h4>
                    </div>
          
                    <div class="col-3"  style="position: relative">
                        <input class="effect-8" type="text" placeholder="Input">
                        <span class="focus-border">
                            <i></i>
                        </span>
                    </div>
                  
                </div>
           
            </div>
        </div>
    </div>

Answer 1

您正在通过absolute 定位创建边框动画，位尚未将父级设置为relative，这就是它溢出整个页面的原因。其次，左右边框元素的left 和right 值为15px，这就是它们与输入边缘不齐的原因。

见下文：（需要添加的附加 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;
        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 class="row">
        <div class="col-sm">
            <div class="box cyan" style="width:100%;">
                <h2>Input Textbox</h2>
                <div class="row">
                    <div class="col-12">
                        <h4><i>Border Effects</i></h4>
                    </div>
          
                    <div class="col-3">
                        <input class="effect-8" type="text" placeholder="Input">
                        <span class="focus-border">
                            <i></i>
                        </span>
                    </div>
                  
                </div>
           
            </div>
        </div>
    </div>

Answer 2

在父级（col-3）上设置（位置：相对）