我用三角形＆＃34;尖端＆＃34;创建了一个纯CSS的语音泡泡。完成后使用＆＃34;玩一个零大小的div的4个边框＆＃34;特技。到目前为止一切都很好。
但我还需要动态调整三角形的位置（相对于包含单词的主要的retangular div）。
图示：
http://www.designwalker.com/img/speech_bubble/speech_bubble10.jpg（忽略色差，第1和第2个气泡中三角形的位置不同）。
问题在于三角形（及其边界）通常使用：在主气泡的类之前和之后完成。而且似乎在jQuery（或任何javascript API）中没有（简单）方法来操纵：class和before之后的CSS属性。
有解决方案吗？
我很确定可以做到这一点，因为当用户将鼠标悬停在右侧的自动收报机行上时，Facebook似乎可以毫无困难地将三角形动态定位到任何想要的位置（取决于屏幕折叠和其他因素）。
我在这里搜索并找到了向div添加动态类的解决方案，但它似乎是不切实际的，因为那时会有许多唯一的类，每个类都有不同的偏移值。 （从0像素到许多像素）
谢谢！
安德鲁
P.S：
顺便说一下，我进一步看了Facebook，他们可能正在玩一些背景图片精灵技巧。但是我花了很多时间＆＃34;完善＆＃34;我的泡泡使用＆＃34;玩一个零大小的div的4个边框＆＃34;伎俩和我真的犹豫重新调查Facebook如何做到这一点，更不用说我必须尽快交付网站..... :-(答案 0 :(得分：3)
伪元素不能被Javascript操纵，因为它们没有正确地暴露给DOM（我们以前称之为Shadow DOM，直到该术语引用了使用Javascript操纵隐式DOM元素的方式）。
您可以做的是向包含元素添加类，这些类将通过其他规则影响其位置。 something very similar有一个很好的例子（它使用<b>元素而非:before和:after来实现IE6支持 - 但原则是相同的，因为{{1}在Stubornella的OOCSS库中永远不会操纵元素并从父母那里推断出它的样式。 code非常有用，因为它在父元素上显示了一个类，用于指示儿童装饰元素应该如何定位。
假设提示的显示方式是好的，编写一个单独的CSS规则来定义它们的每个不同位置。这里我假设<b>元素正在创建提示并且已经绝对位于底部，我使用了left位置。你可以使用你想要的任何选择器或定位技巧而不是这些。
:after然后你需要做的就是改变位置是改变'bubble'元素的类 - 从而避免试图影响.bubble_left:after {
left: 0;
}
.bubble_mid-left:after {
left: 25%;
}
.bubble_mid-right:after {
left: 75%;
}
.bubble_right:after {
left: 100%;
}
元素的CSS属性的问题。