CSSで文字にマーカーをつけて斜めのストライプもつけたい

前提・実現したいこと

テキストにマーカーをつけて斜めのストライプをつけたい。
下記の画像のように文字の半分にだけ斜めのストライプをつけたいのですが、
調べても中々でてきません。CSS3で作られたものが中々参考サイトが見つかりません。
マーカーと斜めのストライプ別々のCSSの記述を1つにまとめてみたのですが、
「該当のソースコード」のように記述してみましたがマーカーもストライプも表示されませんでした。

色々調べたところSCSSでの記述方法はありました。うまくCSSに改変してみましたが表示されませんでした。

該当のソースコード


＜html＞
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<p class="marker">テキストテキストテキスト</p>
</body>
</html>
＜SS＞
.marker {
	width:60%;
	text-align: center;
	font-size: 30px;
	line-height: 1.6em;
	background-image: linear-gradient(transparent 50%,0,-45deg, #ff7d80 25%, #fff 25%, #fff 50%, #ff7d80 50%, #ff7d80 75%, #fff 75%, #fff);
	background-size: 30px 30px;
}

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1<style>
2.marker{
3  font-size:30px;
4  background-repeat: no-repeat;
5  background-position: bottom;
6  background-size: 100% 50%;
7  background-image: repeating-linear-gradient(
8    -45deg,
9    aqua , aqua 7px,
10    transparent 7px, transparent 14px
11  );
12}
13</style>
14<p><span class="marker">テキストテキストテキスト</span></p>
15