袋文字はtext-stroke

こんな感じに後ろに袋文字をつけたい時の方法として、疑似要素にtext-strokeを使って作ってみました。備忘録として。

<h2>title</h2>

h2{
	font-size: 3.75rem;
	font-family: $object;
	text-align: center;
	width: 3em;
	height: auto;
	position: relative;

	&::after{
		content: 'title';
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: $green;
		-webkit-text-fill-color: $white;
		position: absolute;
		top: 1px;
		left: 1px;
		z-index: -1;
	}

}

この方法だと見出しごとにcontent:''を変更しないといけないのが難点。