css after not work

[twice7713]

.speech-bubble {
position: fixed;
z-index: 500;
background: #00aabb;
border-radius: 0.4em;
width: 35%; /* 缩小为屏幕宽度的30% /
left: 40%;
transform: translateX(-50%);
top: 7.5vh; / 从上往下偏移10vh /
font-size: 30px; / 增加字体大小 /
font-weight: bold; / 加粗字体 */
color: white;
padding: 15px;
}

.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 36px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-left: 0;
margin-left: -18px;
margin-bottom: -32px;
}

<div id='chat-interface' class='speech-bubble'>
  <div id='character1'>{character}</div>
  <div id='message1'>{isTyping1 ? textToDisplay1 : message1}</div>
</div>

speech-bubble:after not work

[vincentfretin]

Indeed there is no support css added content with :before or :after. Best is to rewrite your code to avoid using the :after pseudo class I guess.
Htmlmesh doesn't support all css properties, see my notes at
https://aframe.wiki/en/#!pages/gui.md#htmlmesh

[twice7713]

Indeed there is no support css added content with :before or :after. Best is to rewrite your code to avoid using the :after pseudo class I guess. Htmlmesh doesn't support all css properties, see my notes at https://aframe.wiki/en/#!pages/gui.md#htmlmesh

Thanks~