CSS를 사용하여 링크 뒤에 가운데 맞춤 수평선을 추가하는 방법은 무엇입니까?

Question

링크 뒤쪽에 가운데 수평선을 추가해야하므로 화면의 크기를 변경할 때이 선은 링크 뒤쪽 중앙에 머물러 있으며 함께 이동합니다. 또한이 줄이 화면의 전체 너비에 있어야합니다. 두 번째 이미지에

내가 요 "V"링크 뒤에 중심이 얇은 회색 라인을 볼 수, 필요한 것입니다 : 첫 번째 이미지에

내가 지금 무엇을 가지고

내 이 링크의 HTML 코드 :

<div class="welcome-content"> 
      <h1 class="welcome-text">Welcome To Kramerica Industries</h1> 
      <div class="explore-container"> 
       <a class="v-explore-button" href="#about"><i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></a> 
       <p class="explore-text">Explore</p> 
      </div> 
     </div> 

내 말대꾸 :

.welcome-text { 
    text-align: center; 
    font-family: "Droid Sans Bold", "sans-serif"; 
    color: #ffffff; 
    } 

    .explore-container { 
    position: absolute; 
    top: 147%; 
    left: 38%; 



    .v-explore-button { 
     text-decoration: none; 
     color: #ffffff; 
     background-color: #2ecc71; 
     padding: 15px 20px; 
     border-radius: 100%; 
    } 

    .explore-text { 
     margin-top: 20px; 
     color: #ffffff; 
    } 
    } 

Answer 1

body{ 
 
    background-color: black; 
 
} 
 

 
.welcome-text { 
 
    text-align: center; 
 
    font-family: "Droid Sans Bold", "sans-serif"; 
 
    color: #ffffff; 
 
} 
 

 
.explore-container { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 

 
.v-explore-button { 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    background-color: #2ecc71; 
 
    padding: 15px 20px; 
 
    border-radius: 100%; 
 
} 
 

 
.explore-text { 
 
    margin-top: 20px; 
 
    color: #ffffff; 
 
} 
 

 
.explore-container:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 1em; 
 
    left: 0; 
 
    width: 100%; 
 
    height: .15em; 
 
    background-color: #00bade; 
 
} 
 

 
.inner-wrap{ 
 
    margin-right: 38%; 
 
}

<div class="welcome-content"> 
 
    <h1 class="welcome-text">Welcome To Kramerica Industries</h1> 
 
    <div class="explore-container"> 
 
    <div class="inner-wrap"> 
 
     <a class="v-explore-button" href="#about"><i class="fa fa-angle- 
 
     down fa-lg" aria-hidden="true"></i></a> 
 
     <p class="explore-text">Explore</p> 
 
    </div> 
 
    </div> 
 
</div>

나의 추천은 이전과 의사 요소를 사용하는 것입니다 : 솔루션에 대한 예를 참조하십시오. 이것이 도움이되는지 알려주십시오.

Answer 2

• 귀하는 맞추는 근사 % 값을 계산하지 않고 아래 있듯이 중간에 용기 내부 소자를 정렬하기 위해 변환 속성을 사용할 수있다.
• 왼쪽에 38%을 부여하는 대신 explore-container의 너비를 100 %로 설정하고 아래에 표시된대로 text-align:center을 사용하여 요소를 맞 춥니 다.

이 정보가 도움이되기를 바랍니다.

.welcome-text { 
 
    text-align: center; 
 
    font-family: "Droid Sans Bold", "sans-serif"; 
 
} 
 

 
.explore-container { 
 
    position: absolute; 
 
    top: 147%; 
 
    margin:0 auto; 
 
    width:100%; 
 
    text-align:center; 
 
    } 
 
    
 
    .v-explore{ 
 
    position:relative; 
 
    background:yellow; 
 
    } 
 
    
 
    .v-explore-button { 
 
    text-decoration: none; 
 
    background-color: #2ecc71; 
 
    color:#ffffff; 
 
    padding: 15px 20px; 
 
    border-radius: 100px; 
 
    position:absolute; 
 
    top:50%; 
 
    transform: translate(-50%, -50%); 
 
    } 
 
    
 
    
 
    .explore-text { 
 
    margin-top: 20px; 
 
    }

<div class="welcome-content"> 
 
    <h1 class="welcome-text">Welcome To Kramerica Industries</h1> 
 
    <div class="explore-container"> 
 
    <div class="v-explore"> 
 
    <a class="v-explore-button" href="#about">v</a> 
 
    <hr> 
 
    </div> 
 
    <p class="explore-text">Explore</p> 
 
    </div> 
 
</div>

Answer 3

어떻게 변환과 쌍 버튼 클래스 인라인 블록 pseudoelement 전에 :: 사용하려고 : translate Y를 (버튼 폭의 50 %) 및 100 %의 폭?