To fix the issue with backspace causing confusion in a style selector, you need to adjust your code.
Try implementing the following code:
.b_btnWrapp {
position: relative;
width: 100px;
height: 30px;
}
.b_btnWrapp:after {
font-family: "Font Awesome 5 Free";
content: "\f061";
font-weight: 900;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
transition: all .2s;
}
.b_btnWrapp:hover:after {
right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button class="b_btnWrapp btn btn_default">CLick</button>
</body>
</html>
Additionally, I streamlined your code by eliminating unnecessary complexity and removing redundant parts. Remember to use position:relative on the parent element when positioning a child absolutely within its parent's coordinates. Pay attention to the order of selectors as well - .element:hover:after is different from .element:after:hover.