javascript - 显示类似 :hover:before when the page is loaded 的动画

Question

我想输出这样的样式的标题。 > https://jsfiddle.net/nakrys29/5/

h1:before {
  //code
}

h1:after {
  //code
}
h1:hover:before, h1:hover:after {
  //code
}

我想自动显示这个动画，而不仅仅是当它悬停时。所以这个动画应该在页面完全加载时自动启动，但我无法解决这个问题。我尝试使用 js 和 jquery，但我对它有点陌生，所以我找不到正确的方法

感谢任何帮助

Answer 1

您可以创建一个类，将 :before 和 :after 选择器设置为 width: 100%(而不是 :hover 选择器)在窗口加载时添加。

h1 {
	position: relative;
	padding: 5px 0;
	background: none;
	border: none;
  width: 40%;
}

h1:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 3px;
	width: 0;
	background-color: violet;
	transition: 2s ease all;
}

h1:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 0;
	background-color: violet;
	transition: 2s ease all;
}

.animate:before, .animate:after {
	width: 100%;
}

<h1 id="textToAnimate">Hello</h1>
<script>
window.onload = function(){
document.getElementById("textToAnimate").classList.add("animate");
}
</script>