CSS-如何创建带有圆形和线条渐变的标题背景？

我想创建一个具有如下背景的标题：

但有一个问题，如图所示，有3种不同的背景：

• 第一个是整页的
• 第二个只是一个圆
• 三是黑线

我想创建这个标题，但我的背景有问题

我已尝试将Span标记包含到title

h3

。。。没用。 我该怎么办？ 附言：我想为所有的标题背景制作这个背景，所以我不想为一个标题只创建一个背景，我希望它对任何标题都有响应性，并且看起来很好。

标记

 <h3>Meet the Team</h3>

---

演示：

我试过在标题h3中加入Span标记，你在尝试时想到了什么代码？我很困惑-为什么你不能把圆圈/线条的东西放在一个透明的png中，并把它作为背景放在你的
h3
上，我如何使它有响应性？因为有一些不同的标题具有不同的宽度，所以我想使其响应于填充标题的父列。PS：模板的框架是引导式的。谢谢。我知道，我想用百分比，但我不知道在哪里。当我用百分比表示宽度时，div消失了。h3：之后，你可以根据需要更改宽度和位置。h3相同：之前
h3{
    width:320px;
    height:40px;
    text-align:left;
    background:black;
    color:red;
    padding:10px;
    line-height:40px;
    position:relative;
}

h3:before,h3:after{
    position:absolute;
    content:'';
}
h3:before{
   width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #2C2C2C;
    right: 174px;
    top: 20px;
    box-shadow: inset -2px -1px #3F3D3D;    
}

h3:after{
    width:160px;
    height:4px;
    background:red;
    background: #2C2C2C;
    right: 14px;
    top: 28px;
    box-shadow: inset -2px -1px #3F3D3D; 
}