SCSS 꿀팁 &::after / 마지막에 꾸밈요소 추가하기

✔️ 요소 다음에 꾸밈요소 추가하기

가끔씩 특정 요소 다음에 무조건 밑줄이 나오는 등 분리요소 등을 매번 추가하고 싶을 때가 있다.

::after와 ::before를 통해 요소(태그) 앞뒤로 꾸밈 요소를 추가할 수 있다.

 

footer-text라는 className을 가진 요소의 마지막 뒤에는 항상 gray 색상의 bar가 등장한다

.footer-text {
    position: relative;
    display: inline-block;
    margin-right: 17px;
    margin-bottom: 4px;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      right: -8px;
      width: 1px;
      height: 12px;
      background-color: $c-grayD0;
      transform: translateY(-50%);
    }
  }

 

 

✔️ &:last-child를 통해서 맨 마지막 요소에는 안나오게 하기

같은 부모 밑에서 요소가 여러개 있을 때 마지막 요소에는 특별한 CSS를 주고 싶을 때가 많다. 그 때에는 last-child를 사용할 수 있다.

 

아래 코드에서 마지막 요소는 margin-right과 padding-right이 0으로 바뀌고 after 요소도 사라진다

.footer-text {
    position: relative;
    display: inline-block;
    margin-right: 17px;
    margin-bottom: 4px;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      right: -8px;
      width: 1px;
      height: 12px;
      background-color: $c-grayD0;
      transform: translateY(-50%);
    }

    &:last-child {
      margin-right: 0;
      padding-right: 0;
      &::after {
        display: none;
      }
    }
  }

 

✔️ JavaScript 사용예시

위의 SCSS를 적용한 JS 결과는 아래와 같다

<div>
    <p className="footer-text">이용약관</p>
    <p className="footer-text">개인정보처리방침</p>
    <p className="footer-text">이용문의</p>
</div>

 

 

✔️ 유사 사례 &::before

.footer-link {
    position: relative;
    display: inline-block;
    margin: 0 12px;
    font-size: 14px;
    line-height: 24px;
    color: $c-gray6e;

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: -12px;
      width: 1px;
      height: 15px;
      background-color: $c-grayD0;
      transform: translateY(-50%);
    }

    &:first-child::before {
      display: none;
    }
  }