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

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

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

enter image description here

Пожалуйста, не говорите мне это только вопрос предпочтения. лол

DEMO

+2
источник поделиться
1 ответ

Именование ::before и ::after не является полностью произвольным, но это действительно имеет смысл, когда содержимое этих псевдоэлементов отображается в строке, непосредственно перед или сразу после содержимого элемента, к которому они привязаны.

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

position: absolute;

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

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

+3
источник

Связанные вопросы


Похожие вопросы

Посмотрите другие вопросы по меткам или Задайте вопрос