Есть четыре квадрата (см. приложенный код), как в эти квадраты (блоки) вписать текст разного размера и цвета для каждого квадрата?

Question

[Respect and good to all]

Используя только HTML/CSS. Вот код в который нужно вставать текст:

HTML:

<div class="blocks">
  <div class="block block_red"></div>
  <div class="block block_blue"></div>
  <div class="block block_blue"></div>
  <div class="block block_red"></div>
</div>

CSS:

.blocks {
  display: flex;
  flex-wrap: wrap;
}
.block {
  background: black;
  flex-basis: 50%;
}
.block_red {
  background: red;
}
.block_blue {
  background: blue;
}
.block:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

Comments

[Rustam Bainazarov]

Напиши внутрь блоков текст. Не понимаю, если честно, в чём проблема.
<div class="block block_red">Текст</div>

Answer 1

[Талян]

<div class="blocks">
  <div class="block block_red size25">1</div>
  <div class="block block_blue size55">2</div>
  <div class="block block_blue size45">3</div>
  <div class="block block_red size35">4</div>
</div>

.blocks {
  display: flex;
  flex-wrap: wrap;
}
.block {
  background: black;
  flex-basis: 50%;
}
.block_red {
  background: red;
}
.block_blue {
  background: blue;
}
.block:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.size25 {
font-size: 25px;
color: green;
}

.size35 {
font-size: 35px;
color: orange;
}

.size45 {
font-size: 45px;
color: pink;
}

.size55 {
font-size: 55px;
color: lime;
}

Comments

[Respect and good to all]

Спасибо! А как разместить эти же цифры ровно в средине каждого квадрата?

[Rustam Bainazarov]

Артем Скоробогатый, добавьте это к вашим квадратам:

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

Answer 2

[Максим]

Через content:""; или data-text или absolute блок или на js вообще - вопрос не совсем ясен

Comments

[Respect and good to all]

Дополнил вопрос: "Используя только HTML/CSS".

[Максим]

Артем Скоробогатый, content data-text и absolute это и есть html css