Как сделать рамку вокруг тени текста?

Question

[Владислав]

Добрый день.
Я думал что нашёл как это сделать:

Но всплывает косяк при переносе строки:

Причём вообще непонятно, с чего такое поведение.
Привожу код:

<span data-title="Выбранный вариант">Выбранный вариант</span>

span {
	position: relative;
	z-index: 1;
        color: #fff; /*Цвет текста*/
}
span::after {
	content: attr(data-title);
	color: transparent;
	-webkit-text-stroke: 1px #ea253f; /*цвет рамки у тени*/
	text-stroke: 1px #ea253f;
	position: absolute;
	left: 3px;
	top: 3px;
	z-index: -1;
	width: 100%;
}

Может кто-то знает другой вариант реализации такого эффекта? Искал, нашёл только это.

Answer 1

[Ankhena]

Причём вообще непонятно, с чего такое поведение.

С того, что спан инлайн, а псевдо блочный.

Comments

[Владислав]

А вот это помогло. Сделал спан блочным и всё прошло. Спасибо!

Answer 2

[mt. NATS]

1. можно сделать тупо шрифтом
   
2. можно сделать тупо вектором
   
3. ня
   

Comments

[Владислав]

Подложка должна быть прозрачной, т.е. у того, что на заднем плане только контур, не сплошной цвет. Поэтому ваш пример не подходит.

можно сделать тупо шрифтом

Должна быть возможность менять цвет основного текста и цвет рамки теневого текста.

можно сделать тупо вектором

Делать текст картинками? Сейчас 2020 год, вы чего? Мне же не в одном месте надо такой текст сделать. Это же заголовок.

[mt. NATS]

Владислав, если что уже несколько лет flat в моде... вектор это не обязательно кривые
и если вы не в состоянии найти что-то и поправить под себя, то как вы собираетесь фирменный стиль за деньги делать?))) не зная трендов )))

[mt. NATS]

клик-клак

[Владислав]

mt. NATS, И что? Я же не дизайнер. Мне-то что. Что дали то и верстаю. В видосе не рассказывается про какие-то технологии реализации каких-то приёмов.

[Владислав]

mt. NATS, а я и не делаю фирменный стиль, я просто верстаю сайт по макету и всё. Есть макет, надо реализовать. Вы считаете, что есть более подходящий механизм представления текста на сайте, кроме непосредственно самого текста?
Как можно сделать текст на сайте через кривые? Подскажите, где посмотреть. Я не нашёл.