css伪类实现光标效果

// html
<div id="demo"></div>

// css
#demo{
    position: relative;
}

#demo:after {
    position: absolute;
	content: '';
	display: inline-block;
	width: 2px;
	height: 18px;
	top: 50%;
	transform: translateY(-50%);
	animation: blink 1.2s infinite steps(1, start);
}

@keyframes blink {
    0%, 100% {
        background-color: #000;
    }
    50% {
        background-color: transparent;
    } 
}