This is an example code snippet from W3Schools. It showcases an animated button that reveals a small arrow next to the text when hovered over. The specific line of code responsible for this effect is
.button span:after {content: '\00bb'.button {
border-radius: 4px;
background-color: darkgreen;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
**.button span:after {
content: '\00bb'**;
position: absolute;
opacity: 0;
top: 0;
right: -100px;
transition: 0.5s;
}
.button:hover span {
padding-right: 55px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h2>Animated Button</h2>
<button class="button"><span>Hover </button>