Когда использовать: до или: после

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 не является совершенно произвольным, но это только действительно имеет смысл, когда отображается содержание этих псевдо элементов рядный, непосредственно перед или после того, как содержание к элементу, к которому они прикреплены.

Как только вы используете

position: absolute; 

в псевдо-элемента (который является полностью законным), он больше не имеет значения того, что псевдо-элемент назван ::before или ::after.

Его так же легко можно назвать ::presentational-frill-1 или ::presentational-frill-2.