Это более полная демонстрация, включающая контейнеры с кнопками (ссылками), а также переходы при наведении на них и фирменные цвета.
body {
min-height: 10000px;
background-image: url(https://www.robertlandscapes.com/wp-content/uploads/2018/06/slider-BG-5-2.jpg?x48514);
background-repeat: repeat;
}
.shareaholic-canvas {
display: flex;
flex-direction: column;
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%) translateZ(0);
z-index: 10;
overflow: hidden;
}
.shareaholic-canvas > a {
display: inline-block;
width: 52px;
height: 42px;
right: -10px;
position: relative;
transition: 0.3s transform;
}
.shareaholic-canvas > a:hover,
.shareaholic-canvas > a:focus {
transform: translateX(-10px);
}
.youtube { background-color: #e02a20; }
.twitter { background-color: #4da7de; }
.facebook { background-color: #3e5b98; }
.instagram { background-color: #9c7c6e; }
Вы можете использовать
:.,.
как диапазон от текущей строки до текущей строки.
Согласно документу вы можете опустить диапазон, и тогда будет использоваться текущая строка или строка выше.