jurvrn,
оставьте всё как есть, артефакт, если у кого-то и проявится, незаметен.
js тут ничего не исправит, и будет только лишним.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-block {
z-index: 1;
position: fixed;
width: 36px;
height: 175px;
top: 0;
bottom: 0;
margin: auto 0;
left: calc(100% - 36px);
}
.each-block {
position: relative;
z-index: 2;
display: flex;
margin-bottom: 10px;
}
.iconka-block, .textLine-Out {
height: 36px;
border: black 2px solid;
border-radius: 5px 0 0 5px;
}
.textLine-Out {
z-index: 3;
position: static;
display: flex;
background-color: rgb(213, 231, 248);
-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.textLine-Iner {
margin: auto;
font-size: 16px;
white-space: nowrap;
padding: 0 10px;
}
.iconka-block {
position: absolute;
display: flex;
z-index: 4;
background-color: rgb(226,226,226);
width: 36px;
right: 0;
cursor: pointer;
border-right: none;
}
.iconka-block:hover + .textLine-Out, .textLine-Out:hover {
-webkit-transform: translateX(calc(-100% + 4px));
-moz-transform: translateX(calc(-100% + 4px));
-ms-transform: translateX(calc(-100% + 4px));
-o-transform: translateX(calc(-100% + 4px));
transform: translateX(calc(-100% + 4px));
}
.iconka-block .icon_all {
font-size: 22px;
text-align: center;
margin: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<div class="main-block">
<div class="each-block">
<div class="iconka-block"><i class="fa fa-envelope-o icon_all icon_mail" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Напишите нам</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-podcast icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">fa2-podcast 2icon</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-bookmark-o icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">33icon_fa-bookmark-o</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-user-circle icon_all icon_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Вход на сайт</div></div>
</div>
</div>
</body>
</html>