CSS: Вариант оформления текста

Добрый день. В этой статье мы с вами рассмотрим красивый вариант оформления текста на сайте. Таким способом можно оформить, например, заголовки на странице сайта.

На страницу добавим секцию, содержащую текст в теге span:

<section>
	<span data-text="Lorem ipsum dolor sit amet">
		Lorem ipsum dolor sit amet
	</span>
</section>

Обратите внимание, что к span мы добавили свой аттрибут data-text, который содержит в себе тот же самый текст, что и внутри span. Добавим стили:

span{
	font-size: 50px;
	font-weight: 600;
	color: brown;
	width: 100%;
	text-align: center;
	position: relative;
}

Сам эффект будем добавлять с помощью псевдоэлемента before:

span::before{
	content: attr(data-text);
	position: absolute;
	font-size: 65px;
	color: rgba(255,22,5,.3);
	left: 50%;
	transform: translateX(-50%);
	font-weight: 700;
	width: 100%;
	top: -30px;
	z-index: -1;
	text-shadow: 2px 0 18px white;
}