Javascript 如何根据文本两侧的屏幕分辨率自动添加div

我正在尝试将其作为表名之外的表名红色虚线，我想根据屏幕大小动态添加此虚线。在我的文本的两面。对不起，我的英语不好。给我一个建议怎么做

.container{
宽度：100%；
高度：30px；
背景：蓝色；
文本对齐：居中；
}
.货柜跨度{
颜色：#fff；
}
.容器.破折号{
显示：内联块；
宽度：5px；
高度：5px；
背景：红色；
垂直对齐：中间对齐；
}

名称

只需使用媒体查询根据屏幕大小设置

.dash

宽度即可

.container{
宽度：100%；
高度：30px；
背景：蓝色；
文本对齐：居中；
填充顶部：10px；
}
.货柜跨度{
颜色：#fff；
}
.容器.破折号{
显示：内联块；
宽度：200px；
身高：0；
背景：红色；
垂直对齐：中间对齐；
边框：2个蓝色虚线；
}

名称

use:before and:after我想要的意思是，破折号取决于容器的宽度………文本………根据屏幕分辨率，它会自动更改。使用破折号边框很容易：）它无法正常工作为什么会出现问题？为什么要使用蓝色破折号和红色背景？：））Backgorund red是因为@S.R需要红色的破折号，而border blue是因为它的显示就像没有任何东西只用于透明可视化：）