CSS opacity transition

A smooth transition with no invisible remnant or pointer-events: none hack.

by Simon Harte

HTML

<span>text</span>

SCSS

$size: 30px;
$duration: .5s;

span {
	display: block;
	position: relative;
	height: $size;
	line-height: $size;
	cursor: pointer;
	
	&::after {
		content: '+';
		position: absolute;
		font-size: 1.5em;
		right: $size / 2;
		top: 50%;
		transform: translateY(-50%);
		visibility: hidden;
		opacity: 0;
		transition: visibility $duration, opacity $duration;
	}
	
	&:hover {
		&::after {
			visibility: visible;
			opacity: 1;
		}
	}
}