Не удается обрезать фон по тексту во вложенном элементе

Question

Столкнулся с проблемой, надо было добавить счетчик карточкам.
Карточки - это просто h2 элементы с двумя псевдоклассами и обрезкой по тексту.

В общем, счетчики добавил, они у меня пропали. Я пока в раздумьях куда они делись. Без position: absoluteна count-number::before они есть, после добавления они пропадают.

:root {
  --side: 200px;
  --inner-side: 160px;
}

body {
  counter-reset: section;
  display: flex;
  flex-wrap: wrap;
}

.character-box {
  color: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: var(--side);
  height: var(--side);
  margin: 10px;
  line-height: var(--side);
  text-align: center;
  vertical-align: middle;
  position: relative;
  font-size: calc(var(--inner-side) / 1.5);
  font-family: Roboto, sans-serif;
  background-image: url(https://picsum.photos/400?blur=1.2&random=1);
}

.character-box::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://picsum.photos/400?blur=1.2&random=1);
  z-index: -2;
}

.character-box::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--inner-side);
  height: var(--inner-side);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background-color: #111;
  z-index: -2;
}

.count-number::before {
  counter-increment: section;
  content: counters(section, "");
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: inherit;
  left: 30px;
  top: -50px;
  font-size: 0.3em;
  
  position: absolute;
}

<h2 class="character-box">
  <span class="count-number"></span> A
</h2>
<h2 class="character-box">
  <span class="count-number"></span> B
</h2>
<h2 class="character-box">
  <span class="count-number"></span> C
</h2>
<h2 class="character-box">
  <span class="count-number"></span> D
</h2>
<h2 class="character-box">
  <span class="count-number"></span> E
</h2>
<h2 class="character-box">
  <span class="count-number"></span> F
</h2>

Answer 1

В общем проблема была в отсутствии заданного background-image у элементов .count-number. И решилась обычным добавлением background-image: inherit.

Код максимально сыроват, но приложу пока так, как есть.

:root {
  --side: 200px;
  --inner-side: 160px;
}

body {
  counter-reset: section;
  
  display: flex;
  flex-wrap: wrap; 
}

.character-box {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  margin: 10px;
  width: var(--side);
  height: var(--side);
  
  line-height: var(--side);
  text-align: center;
  vertical-align: middle;
  font-size: calc(var(--inner-side) / 1.5);
  font-family: Roboto, sans-serif;
  
  position: relative;
  background-image: url(https://picsum.photos/id/259/400);
}

.character-box::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  z-index: -2;
  
  width: 100%;
  height: 100%;
  
  background-image: inherit;
}

.character-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  
  width: var(--inner-side);
  height: var(--inner-side);

  transform: translate(-50%, -50%);
  display: block;
  background-color: #111;
  z-index: -2;
}

.count-number {
  background-image: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.count-number::before {
  counter-increment: section;
  content: counters(section, "");
  
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  
  position: absolute;
  width: 56px;
  height: 100px;
  left: 0;
  top: 0;
  z-index: 2;
  
  background-image: inherit;
  
  font-size: 0.4em;
  line-height: 100px;
  text-align: right;
}

<h2 class="character-box">
  <div class="count-number"></div>
  A
</h2>

<h2 class="character-box">
  <div class="count-number"></div>
  B
</h2>
<h2 class="character-box">
  <div class="count-number"></div>
  C
</h2>
<h2 class="character-box">
  <div class="count-number"></div>
  D
</h2>
<h2 class="character-box">
  <div class="count-number"></div>
  E
</h2>
<h2 class="character-box">
  <div class="count-number"></div>
  F
</h2>

БЛОГ НА HUSL

Не удается обрезать фон по тексту во вложенном элементе

Ответы (1 шт):