타겟팅 : 후 요소 위에

Question

#btn-home 버튼을 가리키면 :after 요소를 타겟팅하고 싶습니다.

#btn-home a { 
 
    display: inline-block; 
 
    color: #707070; 
 
    font-size: 1.15em; 
 
    font-weight: 600; 
 
    margin: 0 20px; 
 
} 
 
#btn-home { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
#btn-home a:after { 
 
    display: block; 
 
    position: absolute; 
 
    content: ''; 
 
    margin: 0 auto; 
 
    height: 3px; 
 
    width: 25px; 
 
    background-color: red; 
 
    bottom: -7px; 
 
    left: 0; 
 
    right: 0; 
 
}

<div id="btn-home"> 
 
    <a href="<?php echo get_home_url(); ?>">HOME</a> 
 
</div>

나는 #btn-home 공중 선회 할 때 :after 요소의 너비를 대상으로합니다.

Answer 1

매우 쉽게 할 수 있습니다. 선택기를 #btn-home:hover a:after으로 사용하십시오.

#btn-home a { 
 
    display: inline-block; 
 
    color: #707070; 
 
    font-size: 1.15em; 
 
    font-weight: 600; 
 
    margin: 0 20px; 
 
} 
 
#btn-home { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
#btn-home a:after { 
 
    display: block; 
 
    position: absolute; 
 
    content: ''; 
 
    margin: 0 auto; 
 
    height: 3px; 
 
    width: 25px; 
 
    background-color: red; 
 
    bottom: -7px; 
 
    left: 0; 
 
    right: 0; 
 
    transition: all 1s ease; /* just for demo */ 
 
} 
 
#btn-home:hover a:after{ 
 
    width: 100px;

<div id="btn-home"> 
 
    <a href="<?php echo get_home_url(); ?>">HOME</a> 
 
</div>

Answer 2

당신은 당신의 코드에서이 문제를 추가해야합니다 : 아래 투표에 대한 이유는 무엇

#btn-home a:after { 
transition:all .4s linear; 
} 
#btn-home:hover a:after { 
width: 50px; 
} 

#btn-home a { 
 
    display: inline-block; 
 
    color: #707070; 
 
    font-size: 1.15em; 
 
    font-weight: 600; 
 
    margin: 0 20px; 
 
} 
 

 
#btn-home { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 

 
#btn-home a:after { 
 
    display: block; 
 
    position: absolute; 
 
    content: ''; 
 
    margin: 0 auto; 
 
    height: 3px; width: 25px; 
 
    background-color: red; 
 
    bottom: -7px; left: 0; right: 0; 
 
    transition:all .4s linear; 
 
} 
 

 
#btn-home:hover a:after { 
 
width: 50px; 
 
}

<div id="btn-home"> 
 
    <a href="<?php echo get_home_url(); ?>">HOME</a> 
 
</div>