Pseudo-elements, adjacent sibling 인접형제선택자, after pseudo elements

너무 신기한 개념인 pseudo-elements!
h1에 따로 element가 없어도
css자체에서 element에 효과를 줄 수 있다.
사용하는 방법은 이런식으로

h1::first-letter {
  font-style: normal;
  margin-right:5px;
}

h2::first-letter {
  font-size: 80px;
  
}

:: 이렇게 두개 찍어주는게 신기하다ㅋㅋㅋ

음 adjacent sibling이라는것도 배웠는데
한국어로 하면 인접형제 선택자라고 한다...
왜 한국어가 더 어려운거 같지;;;
요건 같은 부모 태그안에 있으면
다같이 형제들인데 인접형제니까
바로 다음에 있는 애를 말한다고 한다.
쓰는 방법은 다음과 같다

h3 + p::first-line {
  color: red;
}

저렇게 +써주면 저게 바로 adjacent이라고 말해주는거다..
예시를 보면 h3 다음에 있는 p element중에서 first-line에 있는애들만
빨간색으로 변하는걸 볼 수 있었다.

자 그리고 다음은
after pseudo element인데
이 아이를 쓰면 html에 element추가 하지 않아도
그냥 css에서 추가해줄수가 있다.
예를 들어

h2::after{
  content: "TOP";
  background-color: #ffe70e;
  color: #444;
  font-size: 16px;
  font-weight:bold;
  display: inline-block;
  padding: 5px 10px;
  position: absolute;
  top: -10px;
  right: -25px;
}

요런식으로 h2자리에 추가해줄수가 있음..
참고로 얘는 디폴트가 inline element라고 한다.
그래서 마진이랑 패딩 변하게 해주기 위해서
absolute positioning해줘야함.
그 이유로 저기 디스플레이에 인라인 블락 써준거고
h2 부분에

h2{
  position: relative;
}

요렇게 써준거임...
흠 근데 초보라 바보같은 질문일수도 있겠지만
h2는 블락 엘리먼트인데 왜 수직으로 안붙고
수평으로 버튼같은게 붙은건지 모르겠음.....
그래서 일단 질문 남겨놓았는데 답변 오면
여기에다 다시 정리해야겠다.
지금으로서는 생각하는게 html를 건드린게 아니니까
h2 특성?은 관계없는것이 아닐까 하는 느낌적인 느낌이....
근데 이건 일단 답변을 기다려보자.. 껄껄껄...