Css 带有：before和：after内容的Div未响应

我有一个标题，里面需要有一个问候div。这个div的样式必须是：before和：after。我不能通过HTML添加它。但是当你调整窗口大小时，一切都会变得一团糟。我不知道如何在不改变字体大小的情况下阻止它的发生

谁能看一下，告诉我有什么我能做的吗？谢谢大家!

.header{
背景图像：url（'http://lorempixel.com/1300/800/');
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
最小高度：765px；
}
.头衔{
位置：绝对位置；
最高：50%；
左：50%；
转化：translateY（-50%）translateX（-50%）；
填充：0px 20px 7px 20px；
边框：1px实心#fff；
外形：2倍实心#000；
盒影：0.15px 0 rgba（0,0,0,375）；
字号：3em；
字号：700；
颜色：#fff；
线高：1.3；
}
.标题：之前{
字体系列：Fontsome；
内容：“\f051”；
字号：1.5em；
垂直对齐：底部对齐；
}
.标题：之后{
内容：“你好”；
位置：绝对位置；
字号：17px；
字体大小：400；
文本转换：大写；
显示：块；
顶部：15px；
左：75px；
线高：1；
}

你好

您可以尝试此代码，删除绝对位置：

.header{
背景图像：url（'http://lorempixel.com/1300/800/');
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
最小高度：765px；
文本对齐：居中；
}
.头衔{
位置：相对位置；
显示：内联块；
利润率最高：15%；
填充：0px 20px 7px 20px；
边框：1px实心#fff；
外形：2倍实心#000；
盒影：0.15px 0 rgba（0,0,0,375）；
字号：3em；
字号：700；
颜色：#fff；
线高：1.3；
}
.标题：之前{
字体系列：Fontsome；
内容：“\f051”；
字号：1.5em；
垂直对齐：底部对齐；
}
.标题：之后{
内容：“你好”；
位置：绝对位置；
字号：17px；
字体大小：400；
文本转换：大写；
显示：块；
顶部：15px；
左：75px；
线高：1；
}

你好