img는 가상요소를 쓸 수 없다?

Summary

삽질정도

허접한 결과물

결론 img는 ::after와 ::before 같은 가상요소를 못쓴다🥹..

---

Problem

위 그림에 표시된 것과 같이 이미지에 가상요소를 추가하는 연습을 하고자 했습니다.

img::after 를 사용해서 진짜 열심히 만들었는데 아무것도 뜨지 않았고... 뇌가 정지할 뻔했지만 바로 구글링 ON..

---

Solved

닫는 태그가 없는 태그는 ::after와 ::before같은 가상요소를 사용할 수 없다고 합니다. 

 

img? 닫는 태그요? 없어요. 

그래서 div를 추가했습니다. 그리고 추가한 div에 가상요소를 추가해서 구현했습니다. 바로 보이는 귀여운 상자^^.. 

 

	<div class="img">
		<img src="./26CB5S28AA_11.png" alt="">
	</div>

div {
  position: relative;
  width: 640px;
}

.img::before {
  position: absolute;
  content: "";
  top: -2%;
  left: -2%;
  width: 10%;
  height: 10%;
  background-color: aqua;
  z-index: -1;
}

.img::after {
  position: absolute;
  content: "";
  bottom: -2%;
  right: -2%;
  width: 10%;
  height: 10%;
  background-color: aqua;
  z-index: -1;
}

 

절겁다^^

 

다음 블로깅 주제가 정해졌습니다.

닫는 태그가 가상요소를 사용할 수 없는 내용은 가상요소에 대해 블로깅할 때 함께 살펴보겠습니다.