使用attr()抓取data-*

在标签上自定义属性data-*，通过attr()获取其内容赋值到content上

<div class="bruce flex-ct-y">
	<a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
	<a class="tooltips" href="https://www.baidu.com"></a>
</div>

.tooltips {
	position: relative;
	margin-top: 10px;
	padding: 0 20px;
	border-radius: 10px;
	height: 40px;
	background-color: $purple;
	line-height: 40px;
	color: #fff;
	&::after {
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 5px;
		width: 100%;
		height: 100%;
		background-color: rgba(#000, .5);
		opacity: 0;
		text-align: center;
		font-size: 12px;
		content: attr(data-msg);
		transition: all 300ms;
	}
	&:first-child {
		margin-top: 0;
	}
	&:hover::after {
		left: calc(100% + 20px);
		opacity: 1;
	}
	&[href]:empty::before {
		content: attr(href);
	}
	&[href]:empty:hover::after {
		display: none;
	}
}