More interesting Title Dynamic Effect

Preface

When browsing the blog, I see a more interesting dynamic effect , When the mouse hovers over the title , Smooth separation , Move it away smoothly , So I realized , pure html+css

Code

html part

<span class="dev-test">
	<b class="dev-test dev-front">
		<i>1</i>
	</b>
	<span class="dev-test dev-test-line">|</span>
	<b class="dev-test dev-after">
		<i>0</i>
	</b>
	<span class="dev-test dev-test-title">
		 title 
	</span>
</span>

css part

.dev-test {
    
	font-family: "arial black";
	font-size: large;
	margin-left: 20px;
	transition: all .6s cubic-bezier(.555,-.375,0,1.615);
}

.dev-test .dev-test-line {
    
	transform: rotateZ(22deg);
	position: absolute;
	margin-left: 10px;
	margin-top: -1px;
	z-index: 100;
}

.dev-test .dev-front {
    
	position: absolute;
	margin-left: 0px;
	z-index: 0;
	transition: all .6s cubic-bezier(.555,-.375,0,1.615);
}

.dev-test .dev-after {
    
	position: absolute;
	margin-left: 10px;
	z-index: 0;
	transition: all .6s cubic-bezier(.555,-.375,0,1.615);
}
.dev-test .dev-test-title {
    
	margin-left: 30px;
	transition: all .6s cubic-bezier(.555,-.375,0,1.615);
}
.dev-test:hover .dev-front {
    
	margin-left: -10px;
}
.dev-test:hover .dev-after {
    
	margin-left: 20px;
}
.dev-test:hover .dev-test-title {
    
	margin-left: 40px;
}

I like this effect very much , Make a note of