发光括号伪元素css

我试图为标题制作发光的括号，有些是一行，有些是两行，就像图片上的一样。有这样做的选择吗？它可以是笔直的支架，但不像照片中那样精确

.container{
背景色：#000000；
高度：100vh；
保证金：0自动；
填充：10%；
}
.括号{
位置：相对位置；
颜色：白色；
}
.括号：之前{
位置：绝对位置；
内容：“；
身高：100%；
宽度：10px；
背景：rgba（255，255，255，0.8）；
盒影：0 0 40px 5px#3ebcf5；
}
.括号：之后{
位置：绝对位置；
内容：“；
身高：100%；
宽度：10px；
背景：rgba（255，255，255，0.8）；
盒影：0 0 40px 5px#3ebcf5；
}

名称

您的解决方案（在评论中）几乎是正确的。在这里，我修复了一些填充物：

---

我的解决方案

我使用了一个方框而不是您要求的“[]”字符，因为您无法根据容器高度缩放字符

h1{
位置：相对位置；
填充：0.1em；
显示：内联块；
颜色：蓝色；
}
h1:：之前，h1:：之后{
内容：“；
位置：绝对位置；
排名：0；
宽度：0px；
身高：100%；
边框：5px纯白；
盒影：0 0 30px蓝色，0 0 5px蓝色，0 0 5px蓝色；
背景：蓝色；
}
h1：：之前{
左：0；
右边框颜色：透明；
}
h1：：之后{
右：0；
左边框颜色：透明；
}

在黑暗中发光


就像霓虹灯一样

请用您尝试过的内容更新您的答案。是的，有很多选项可以做到这一点，您只需使用CSS就可以轻松做到这一点。好主意，但我在照片上看到了这个文本，所以我需要使这个括号的形状准确。这并不容易，因为您无法根据容器高度缩放字体。如果事先知道文本的行数，可以相应地设置字体大小。