如何隐藏内容I'；当HTML文本元素为空时，是否使用：before伪选择器创建？

我正在用CSS和HTML创建聊天泡泡

如果聊天泡泡中没有文本，我不希望它显示

我可以使用

：empty

让聊天泡主体消失，但我无法让聊天框的三角形部分消失，因为它是使用伪选择器

：before

和内容创建的：

'

我的代码如下。如果

h4

元素为空，是否有办法使这个小三角形消失

/*CSS聊天泡泡*/
.myFeedback h4：空{
显示：无；
}
.空谈{
边缘顶部：220px；
左：390px；
显示：内联块；
位置：绝对位置；
宽度：200px；
高度：自动；
背景颜色：紫色；
}
.轮{
边界半径：10px；
}
在…之前{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
左：自动；
右：-20px；
顶部：38px；
底部：自动；
边界：12px固体；
边框颜色：紫色透明紫色；
}
/*谈论泡沫内容*/
.talktext{
填充：10px；
文本对齐：居中；
线高：1.5em；
}
.talktext p{
/*删除webkit页边距*/
-之前的webkit页边距：0em；
-webkit页边距：0em；
}
/*谈话结束时的泡沫材料*/

/*CSS聊天泡泡*/
h4：空的{
显示：无；
}
.空谈{
边缘顶部：220px；
左：390px；
显示：内联块；
位置：绝对位置；
宽度：200px；
高度：自动；
背景颜色：紫色；
}
.轮{
边界半径：10px；
}
.tri-right.right-in h4:之前{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
左：自动；
右：-20px；
顶部：38px；
底部：自动；
边界：12px固体；
边框颜色：紫色透明紫色；
}
/*谈论泡沫内容*/
.talktext{
填充：10px；
文本对齐：居中；
线高：1.5em；
}
.talktext p{
/*删除webkit页边距*/
-之前的webkit页边距：0em；
-webkit页边距：0em；
}
/*谈话结束时的泡沫材料*/

带文本

一种方法是将

.tri-right.right-in:before{

替换为

.tri-right.right-in>h4:before{

，因此三角形位于h4内部并被隐藏（：empty不受：before影响）。我在JSFiddle中尝试了它，它似乎工作得很好，不需要其他CSS更改。JSFiddle:@elveti此评论应该是一个答案。@elveti非常感谢。这非常有效。