CSSで枠内から文字を飛び出す方法

お世話になります。

HTMLとCSSの勉強をしています。

見本のように、
数字(190)を枠からはみ出るようなレイアウトを実装したいのですが、
現状、数字を枠内に収めることしかできません。

CSSの方針は、flexを利用して
「SVG」と「テキスト」の縦センターを揃えています。

可能なら、この方針で実装したいと思いますが、
その他の方法でも、なにかアドバイスいただけると幸いです。

どうぞよろしくお願い致します。

↓見本

↓現状

html
1<span class="head-pr"><svg viewBox="0 0 21 20" width="21px" height="20px"><path style="fill: #fff;" d="M19.423,7.180 C18.555,7.180 17.852,7.890 17.852,8.766 C17.852,9.119 17.970,9.442 18.163,9.706 C14.413,12.365 12.161,7.170 11.373,4.838 L11.065,3.824 C11.858,3.578 12.438,2.841 12.438,1.960 C12.438,0.878 11.570,0.001 10.498,0.001 C9.426,0.001 8.558,0.878 8.558,1.960 C8.558,2.841 9.138,3.578 9.931,3.824 L9.623,4.838 C8.836,7.170 6.583,12.365 2.833,9.706 C3.026,9.442 3.144,9.119 3.144,8.766 C3.144,7.890 2.441,7.180 1.573,7.180 C0.705,7.180 0.002,7.890 0.002,8.766 C0.002,9.642 0.705,10.352 1.573,10.352 C1.734,10.352 1.885,10.321 2.031,10.276 L3.871,16.341 C4.782,16.604 7.033,17.128 10.498,17.128 C13.964,17.128 16.215,16.604 17.125,16.341 L18.965,10.276 C19.111,10.321 19.262,10.352 19.423,10.352 C20.291,10.352 20.994,9.642 20.994,8.766 C20.994,7.890 20.291,7.180 19.423,7.180 ZM10.498,15.231 L8.295,13.007 L10.498,10.783 L12.701,13.007 L10.498,15.231 ZM4.335,17.870 L4.746,19.224 C4.746,19.224 6.723,19.992 10.498,19.992 C14.273,19.992 16.250,19.224 16.250,19.224 L16.661,17.870 C15.414,18.157 13.352,18.493 10.498,18.493 C7.645,18.493 5.583,18.157 4.335,17.870 Z"></path></svg><span class="sitehead_pr_text">使用<span class="sitehead_pr_num">30</span>件突破！</span></span>

css
1.head-pr {
2	display: inline-flex;
3	align-items: center;
4	background: #000;
5	color: #fff;
6	border-radius: 14px;
7	text-align: center;
8	padding: 0 10px;
9}

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

回答1件

ベストアンサー

いろいろ方法はあると思いますが、角丸の背景を疑似要素で表現して、位置を調整してみました。

css
1.head-pr {
2  display: inline-flex;
3  align-items: center;
4  color: #fff;
5  text-align: center;
6  padding: 0 10px;
7  position: relative;
8}
9.head-pr > span > span {
10  font-size: 2em;
11  font-weight: bold;
12  -webkit-text-stroke: 1px #000;
13  text-stroke: 1px #000;
14}
15.head-pr::before {
16  content: "";
17  position: absolute;
18  height: 1.7em;
19  left: -5px;
20  right: -5px;
21  bottom: 0.4em;
22  background: #000;
23  border-radius: 14px;
24  z-index: -1;
25}
26.head-pr svg {
27  padding-top: 0.3em;
28}