가상요소(:before, :after)에 줄바꿈하기

CSS 가상요소(:after , :before)를 통해 추가된 컨텐츠의 내용을 줄바꿈하는 방법

HTML 과 CSS(혹은 SCSS)

<style>
  #boxed:after {display: block; content: '안녕하세요|A 줄바꿈입니다.'; white-space: pre;} /* |A = 줄바꿈 */
</style>

<style lang="scss">
  #boxed {
    &:after {display: block; content: '안녕하세요|A 줄바꿈입니다.'; white-space: pre;} /* |A = 줄바꿈 */
  }
</style>

<div id="boxed">after</div>

결과

안녕하세요
줄바꿈입니다.