何时使用：之前或之后

Question

在转到我的问题之前，我知道:before和:after选择器的工作原理。 （不是what is ::before or ::after expression的副本）。我的问题是关于使用。

多年来，我看到一些不一致的地方，这些选择器被用来展示同样的东西。结果相同，方法不同。在某些特定情况下，例如在li a选择器之前在:before内添加字体真棒图标是有意义的。我不是在询问这种用法，因为它足够直观易懂。但是，例如，在工具提示中使用语音气泡。我看到三角形放置了一个:before和一个:after，在某些情况下他们同时使用了这两个！我糊涂了。

选择哪个选择器用于在讲话气泡上附加元素（例如三角形）的决定因素是什么？

请允许我演示：

HTML

<div class="container">
    <div class="bubble">This is my text in a bubble using :after</div>
    <div class="bubble2">This is my text in a bubble using :before</div>
</div>

CSS

.bubble{
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

.bubble:after {
  content: "";
  display: block; 
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}


.bubble2 {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

.bubble2:before {
  content: "";
  display: block; 
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}

IMG

请不要告诉我这只是一个偏好问题。洛尔

DEMO

Answer 1

::before和::after的命名并非完全随意，但只有在显示 内嵌 strong>，就在它们附加元素的内容之前或之后。

一旦使用

position: absolute;

在一个伪元素（完全合法）中，该伪元素是否被命名为::before或::after不再重要。

可能很容易将其命名为::presentational-frill-1或::presentational-frill-2。