grippy.scss

.grippy {
    $grippy-spacing: 2px;
    &::before,
    &::after {
        content: '....';
        will-change: contents;
        transition: all 180ms;
        opacity: 0.0;
        color: #aaa;
        display: inline-block;
        vertical-align: text-top;
        line-height: 2px;
        width:1px;
    }
    &::before { transform: translate(-$grippy-spacing, 0.25em) rotate(90deg); }
    &::after  { transform: translate( $grippy-spacing, 0.25em) rotate(90deg); }
    &:hover::before, &:hover::after { opacity: 1;}
}