Lepiej z visibility: hidden; bo z display: none; kontent "pływa"
span:hover::after,
span:hover::before {
/*display: none;*/
visibility: hidden;
}
ciekawy efekt jest: transition: opacity;
div {
text-align: center;
}
span::before,
span::after {
opacity: 1;
transition: opacity 1.2s ease-in-out;
}
span::before {
content: 'before ';
color: blue;
}
span::after {
content: ' after';
color: blue;
}
span:hover::after,
span:hover::before {
/* display: none; */
/* visibility: hidden; */
opacity: 0;
}
CodePen