Ausrichtung: nach Element auf Hover

Question

Ich möchte das Element :after Ziel, wenn ich über die #btn-home Schaltfläche schweben.

#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>

Ich möchte die Breite des :after Element zum Ziel, wenn sie über #btn-home schwebte.

Answer 1

Das ist ziemlich einfach zu tun. Verwenden Sie den Selektor als #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

Sie müssen dies in Ihrem Code hinzuzufügen:

#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>