何时使用：before或：after

Question

在开始我的问题之前，我知道:before和:after选择器如何工作。（不是::: before或:: 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

请不要告诉我这只是一个偏好问题。大声笑

演示

Answer 1

的命名::before和::after不完全是任意的，但只有真正有意义时，显示这些伪元素的内容内嵌，之前或者只是它们所连接的元素的内容之后。

一旦使用

position: absolute;

在伪元素（完全合法）中，该伪元素是::before还是都不再重要::after。

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