Как сделать text по центру в псевдоэлементе :after?

Question

[SheikhRamil]

Чтобы текст был в центре (не сверху в центре);
/* Спасибо за ответ */

Comments

[Ankhena]

Не всё понятно.
Рамка это элемент, а текст псевдоэлемент?
В большинстве случаев разумно наоборот. А по вашей картинке и псевдо и вовсе не нужен.

Поэтому, выложите свой код в песочницу jsfiddle.net (без регистрации) или codepen.io.

Answer 1

[Ankhena]

Проще всего: https://jsfiddle.net/58qdn06e/
Если объясните зачем там нужен псевдо - обсудим.

Comments

[SheikhRamil]

div::after {
  content: "text";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  background: url(https://image.flaticon.com/icons/svg/33/33587.svg) no-repeat center / 100%;
}

Я переименовал класс "block" на div::after - и все заработало точно также!
А можете сказать для чего нужен {

display: flex;
align-items: center;
justify-content: center;

}

[Ankhena]

Ramil_ Bayramov_,

Я переименовал класс "block" на div::after - и все заработало точно также!

Логично.
Я у вас еще в комментариях просила показать ваш код и описать что блок, а что псевдо и зачем он вообще.

А можете сказать для чего нужен

Самый простой способ горизонтального и вертикального центрирования.

https://html5book.ru/css3-flexbox/
https://tproger.ru/translations/how-css-flexbox-works/

[SheikhRamil]

Уже не важно, thanks for help

[SheikhRamil]

псевдоэлемент ::after нужен был для первой рамки(красный) и через content: "Hello" разместить в центре (практиковался)

.div::after {
                content: "Hello";
                top: 37px;
                left: 28px;
                right: auto;
                position: absolute;

my code

[Ankhena]

Ramil_ Bayramov_, понятно :)
Удачи в практике, если что велкам

Answer 2

[Lord_Dantes]

Родителю нужно задать position: relative;
Этот код можно задать псевдо-элементу.

position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;