CSS 화살표 만들기: CSS 소스 after로 화살표 만들기

웹클래스·2020년 9월 27일
0

css 소스

목록 보기
1/4

소스코드

각도

  • 45deg
  • 135deg
  • 225deg
  • 315deg

소스 사용 응용하는 방법

부모 태그에 position: relative; 기준으로 해놓고 부모 태그 안에 자식 태그에 position: absolute; CSS 스타일 적용하면 됩니다.

<div>
  <span></span>
</div>
div {
  position: relative;
}

div > span {
  position: absolute;
  top: 0px; /* 부모 태그에서 원하는 위치의 값을 px 단위로 입력해주세요. */
  left: 0px; /* 부모 태그에서 원하는 위치의 값을 px 단위로 입력해주세요. */
}

::after 사용하려면 아래의 코드를 보고 소스 적용하면 됩니다.

<div></div>
div {
  position: relative;
}

div::after {
  content: ''; /* ::after 사용할 때 작성해야 나와요 */
  position: absolute;
  top: 0px; /* 부모 태그에서 원하는 위치의 값을 px 단위로 입력해주세요. */
  left: 0px; /* 부모 태그에서 원하는 위치의 값을 px 단위로 입력해주세요. */
}
profile
코드를 기록하는 공간

0개의 댓글