[CSS] 글자 뒤에 이미지 배치 외않되?

사건의 전말

타이머 작업을 하던 중 글자를 앞에 두고 이미지를 뒤에 두고싶었다.

이렇게 말로쓰면 너무 간단하고 문제를 해결한 지금 다시봐도 왜 어렵게 생각했는지 의문이들정도다. 

(하지만 그 당시에는 촉박했고 시간안에 해야한다는 생각에 다급했다)

 

현실

.wraps-time .num-hour::after, 
.wraps-time .num-min::after, 
.wraps-time .num-sec::after {
  content: "";
  display: block;
  background: no-repeat center/80px url(../images/box.png);
  width: 80px;
  height: 80px;
}

간략한 설명 

.wraps-time 안에 시간(.num-hour), 분(.num-min), 초(.num-sec)를  배치했고 각 시간,분,초에 가상요소를 주어 background이미지를 넣으려고했다. 하지만 현실은 글자 따로 이미지 따로..!

 

문제 해결

.wraps-time .num-hour, 
.wraps-time .num-min, 
.wraps-time .num-sec  {
  background: no-repeat center/80px url(../images/box.png);
  width: 80px;
  height: 80px;
}

가상요소를 뺐을 뿐인데 바로 적용이 됐다.😂

내 머리속에는 background == 가상요소라는 이상한 공식이 있었는지 그냥 background를 넣을 생각은 못 해봤다.

 

다행히 오래 삽질한건 아니었지만

이 간단한걸 생각 못했었다는것에 반성한다... 급해도 차근차근 생각해보자...ㅠ