清除浮动问题

请问老师，如何用伪元素after清除浮动

代码：

.course>ul>li>h1:after{

content: ""; 

clear: both;

}

源码：

<template>
	<div class="course">
		<ul>
			<li>
				<img src="../../assets/course1.jpg" />
				<h1>实例秒解Sed和Awk的秘密</h1>
				<h3>中级</h3>
			</li>
		</ul>
	</div>
</template>
<style scoped>
	.course{
		width: 750px;
		overflow-y: scroll;
		overflow-x: hidden;	
	}
	.course>ul{
      font-size: 0;
	}
	.course>ul>li{
		padding-top: 43px; 
		position: absolute;
      width: 750px;
     
      background: yellow;
	}
	.course>ul>li>img{
	   float: left;
      padding-right: 29px;
		border-radius:20px;
		width: 218px;
		height: 145px;
		padding-left: 38px;
    
	}
	.course>ul>li>h1{
		float: left;
		display: flex;
		font-size: 28px;
		font-weight: 00;
 
	}
	.course>ul>li>h1:after{
		content: ""; 
		clear: right;
	}
	.course>ul>li>h3{
		float: left;
		font-size: 16px;
		font-weight:10;
		color: #a0a4a8;
	}

</style>