Css 带边框的动态文本，其容器具有背景图像

我需要实现这样的东西

-------------------------
|                        |
|                        |
|----  dynamic text  --- |
|                        |
-------------------------

我想要css中围绕“动态文本”的一行

我试着在css之前和之后使用&::。有什么想法吗

<div id="divWithBackground">

  <div id="divActsAsLine">

    <span id="DynamicText">Your text here </span>

  </div>

</div>

---

其逻辑是将div边距作为背景线，并使跨度与该线重叠，为此，我们需要减小或增大边距属性。如果需要，您可能需要使用z-index

您可以使用JavaScript动态设置

:before

和

:after

:pseudo元素的宽度

函数foo（）{
var ss=document.styleSheets；
var text=document.getElementById（'text'）；
var-box=document.getElementById（'box'）；
var totalWidth=getComputedStyle（box）.width.slice（0，-2）；
var textWidth=text.offsetWidth；
var线宽；
var margin=4；//设置文本和行之间的边距。
对于（i=0；i
#框{
宽度：300px；
高度：200px；
背景色：#FF0000；
线高：200px；
文本对齐：居中；
}
#正文{
位置：相对位置；
背景色：rgba（0,0,0,0.5）；
边界半径：10px；
填充：4px；
颜色：白色；
}
#文本：之前{
内容：“；
位置：绝对位置；
边框底部：1px纯黑；
高度：100px；
}
#文本：之后{
内容：“；
位置：绝对位置；
边框底部：1px纯黑；
高度：100px；
}
这是动态文本
根据您的回答，我做了一个JSFIDLE。问题是，我需要为动态文本提供透明的颜色如果背景是彩色的，你可以使用相同的颜色来感受透明度，但是因为它是一个图像，我们可能需要考虑另一种解决方案。不，背景是一个图像。
#divActsAsLine{
border-botton:1px solid #00;
text-align:center;
}

#DynamicText{
 position:relative;
 background-color: #fff;
 margin-bottom:-20px /*Adjust this based on your requirements*/
 z-index:1 /* optional */
}