.speech-bubble {
  position: relative;
  padding: 10px;
  background-color: #f7f7f7;
  border-radius: 5px;
}

.speech-bubble::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #f7f7f7 transparent;
}

등)와 그 요소에 대한 콘텐츠 사이에 삽입되는 가상의 요소입니다. 이 가상 요소는 내용(content)을 가질 수 있으며, CSS를 사용하여 스타일링할 수 있습니다.

::before 가상 요소는 content 속성을 사용하여 콘텐츠를 지정합니다. content 속성 값으로는 텍스트, 이미지, 빈 문자열(""), CSS 카운터 등이 올 수 있습니다.

위 코드에서 ::before 가상 요소는 말풍선의 삼각형을 나타냅니다. position: absolute 속성을 사용하여 원본 요소(.speech-bubble 요소)에 상대적인 위치를 지정하고 있습니다. top, left 속성을 사용하여 요소의 위치를 지정하고, margin-left 속성을 사용하여 가운데 위치시키고 있습니다. border 속성을 사용하여 삼각형의 경계를 지정하고 있습니다.

이렇게 ::before 가상 요소를 사용하면, HTML 요소의 콘텐츠와 함께 추가적인 콘텐츠를 생성하고, 이를 스타일링하여 다양한 효과를 만들 수 있습니다.

::before가 사용되는 상황

::before 가상 요소는 다양한 상황에서 사용됩니다. 예를 들어, 다음과 같은 경우에 많이 사용됩니다.

아이콘 등의 추가 콘텐츠를 생성하는 경우

::before 가상 요소를 사용하여 HTML 요소의 콘텐츠와 함께 아이콘 등의 추가 콘텐츠를 생성할 수 있습니다.
버튼 등의 요소에 추가적인 스타일을 적용하는 경우

::before 가상 요소를 사용하여 버튼 요소에 삼각형 등의 모양을 추가할 수 있습니다.
폼 요소의 레이블을 스타일링하는 경우

::before 가상 요소를 사용하여 폼 요소의 레이블을 꾸미거나 추가적인 콘텐츠를 생성할 수 있습니다.
텍스트의 특정 부분을 꾸미는 경우

::before 가상 요소를 사용하여 텍스트의 특정 부분에 배경이미지, 아이콘 등을 삽입하여 꾸밀 수 있습니다.
이 외에도 ::before 가상 요소는 다양한 상황에서 사용됩니다. HTML 요소와 함께 사용하여 다양한 효과를 만들 수 있습니다.

::before 와 position:absolute의 차이

position: absolute를 사용하지 않고 ::before 가상 요소를 사용하면, ::before 요소의 기본 위치는 부모 요소의 시작 부분입니다. 즉, 부모 요소의 레이아웃에서 ::before 요소는 고유한 공간을 차지하지 않고, 부모 요소 내의 콘텐츠와 함께 위치합니다.

반면, position: absolute 속성을 사용하면 ::before 요소가 상위 요소에서 분리되어 고유한 레이아웃을 가지게 됩니다. 이 때, ::before 요소의 위치는 상위 요소에서 가장 가까운 position 값이 relative, absolute, fixed, 또는 sticky인 조상 요소에 대해 상대적으로 지정됩니다.

따라서, position: absolute를 사용하지 않고 ::before 가상 요소를 사용할 경우에는 부모 요소의 레이아웃에 종속적인 형태로 콘텐츠를 추가할 수 있습니다. 하지만, position: absolute를 사용하면 상위 요소에서 분리된 형태로 콘텐츠를 추가할 수 있습니다. 이는 디자인에 따라 다르게 선택되어야 할 것입니다.