带彩色圆形编号列表的CSS实现：兼容<strong>元素方案问询

我想要制作一个编号位于彩色圆形中的列表，效果如下：

最初我通过:before伪元素与计数器实现了该效果，但发现换行后的文本无法缩进，相关代码如下：

/*settings for whole list <ol> */
.round-number-list-b {
    margin-left: 0 !important;
    padding-left: 0 !important;
    counter-reset: item;
}

/*settings for list items <li> */
.round-number-list-b > li {
    margin-left: 0;
    padding-left: 0;
    counter-increment: item;
    list-style: none inside;
    margin-bottom: 0.5rem
}

/*settings for actual number */
.round-number-list-b > li:before {
    display: inline-block;
    width: 1.5rem;
    aspect-ratio: 1/1;
    content: counter(item);
    padding: 0.1rem;
    margin-right: 1.2rem;
    font-weight: 900;
    color: white;
    background: #005577;
    border-radius: 5rem;
    overflow: visible;
    text-align: center;
}

于是我改用display: flex;布局，调整对齐方式后解决了换行缩进和圆形正圆的问题，但列表中大量使用的<strong>元素出现异常。补充代码如下（其余代码不变）：

.round-number-list > li {
display: flex;
align-items: flex-start;
}

.round-number-list > li:before {
flex: 0 0 1.3rem;
}

我试过在每个列表项中添加<p>标签（示例：<li><p>Click on the <strong>Inbox</strong> in the global navigation.</p></li>）实现了预期效果，但这种方式过于繁琐，不利于coding能力较弱的同事复用。

请问是否有更优雅的实现方式，既能实现彩色圆形编号，又能正常使用<strong>元素？我不能仅用带粗体的<span>标签替代，因为需要<strong>的语义化以满足无障碍访问要求。

内容的提问来源于stack exchange，提问作者Sarahdactyl