擬似要素は要素の一番上にあります。

Question

私はa：after擬似要素を使って境界ボトムアニメーションを作成しています（境界は左から右に入っています）。しかし、このテクニックは何度か使用されましたが、何かの理由でトップではなく底にではなく、私は理解できません。私はフロートを使用して、ディスプレイの種類を変えようとしましたが、違いはありません。

HTML：

<div class="search"> 

    <svg viewBox="0 0 485.213 485.213"> 

      <path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324 
       c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/> 
      <path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951 
       C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46 
       c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465 
       C318.424,257.208,257.206,318.416,181.956,318.416z"/> 
      <path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/> 

    </svg> 

    <span>Zoeken</span> 

    </div> 

のCss：

.search { 
    transition: 0.5s ease; 
    border-bottom: 2px solid transparent; 
    white-space: nowrap; 
    width: 120px; 
    height: 60px; 
    float: left; 
    display: block; 
} 

.search:after { 
    content: ''; 
    display: block; 
    height: 2px; 
    width: 0; 
    background: $main-color; 
    transition: width .5s ease, background-color .5s ease; 
    float: none; 
} 

.search:hover:after { 
    width: 100%; 
} 

ここでは、問題の視覚的です。赤い線がボトムの上にあるはずです。

Answer 1

これらのケースでは、私は通常、私は内部のspan要素のフロートを削除する必要がありましたposition: absolute

.search { 
 
    white-space: nowrap; 
 
    width: 120px; 
 
    height: 60px; 
 
    position: relative; 
 
} 
 
.search svg { 
 
    height: 100%; 
 
} 
 
.search:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: -4px; 
 
    height: 2px; 
 
    width: 0; 
 
    background: red; 
 
    transition: width .5s ease; 
 
} 
 
.search:hover:after { 
 
    width: 100%; 
 
}

<div class="search"> 
 
    <svg viewBox="0 0 485.213 485.213"> 
 
      <path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324 
 
       c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"/> 
 
      <path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951 
 
       C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46 
 
       c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465 
 
       C318.424,257.208,257.206,318.416,181.956,318.416z"/> 
 
      <path d="M75.817,181.955h30.322c0-41.803,34.014-75.814,75.816-75.814V75.816C123.438,75.816,75.817,123.437,75.817,181.955z"/> 
 
    </svg> 
 
    <span>Zoeken</span> 
 
    </div>

Answer 2

使用しています。