带有框和三角形的响应式HTML列表项

Question

给出像

这样的HTML列表

<h1>Agenda</h1>
<ol id="agenda">
    <li>First Topic</li>
    <li>Second Topic</li>
    <li>Third Topic</li>
    <li>Fourth Topic</li>
    <li>Fifth Topic</li>
</ol>

我尝试像这个图像一样设计样式

styled list items having box and triangle

但我不知道如何格式化右侧有三角形的项目。

我确实

html {
    font-size:62.5%
}

body {
    font-size:4rem;
    font-weight:normal;
    counter-reset:agenda
}

ol {
    list-style-position:inside;
    list-style-type:none;
    padding-left:3rem
}

ol li {
    margin:0.75rem 0;
    vertical-align:middle
}

ol#agenda li::before {
    counter-increment:agenda;
    content:counter(agenda);
    background-color:#58595b;
    color:#fff;
    padding:0.5rem 1rem;
    margin-right:3rem
}

这给了我一个柜台周围的盒子但是错过了三角形。我考虑添加背景图像，但必须使用颜色和响应式进行样式设置，因此当我更改字体大小时，列表项也必须缩放。

如何添加三角形？或者还有其他解决方案吗？

提前致谢

更新

我不想直接设置div或span的样式。我想设置有序或无序列表的列表项的样式。我知道可以使用伪元素:: before和:: after添加三角形。但这并不适合我，因为在所有解决方案中我发现元素都是具有

的风格

before {
  content: '';
  width: 0;
  height: 0;
}

但是因为我想添加内容（计数器的数字），我不能用这个技巧来获得箭头三角形。