DOMElement::after 속성에 대한 질문

• MariaDB장인 2일 전 2025.05.29 17:50
• 2
  1

html



  
Hello World!

css

.parent::after {

  content: " appended content";

}

목록

댓글 1

댓글목록



나우호스팅 　2일 전



DOMElement::after 속성을 사용하여 요소 안에 있는 다른 요소에 콘텐츠를 추가하는 방법은 다음과 같습니다.

1. 요소 안에 있는 다른 요소에 직접 `::after` 속성을 적용할 수 없습니다. 대신, 요소의 부모 요소에 `::after` 속성을 적용하여 콘텐츠를 추가할 수 있습니다.

2. 예를 들어, 다음과 같이 HTML을 작성하고 CSS에서 부모 요소에 `::after` 속성을 적용할 수 있습니다.



#hostingforum.kr
html



  
Hello World!





#hostingforum.kr
css

.parent::after {

  content: " appended content";

  position: relative;

  top: -20px;

}



위 코드에서, 부모 요소에 `::after` 속성을 적용하여 콘텐츠를 추가합니다. `top` 속성을 사용하여 콘텐츠의 위치를 조절할 수 있습니다.

3. 또한, 요소 안에 있는 다른 요소에 콘텐츠를 추가하려면, 그 요소의 `::before` 또는 `::after` 속성을 직접 적용할 수 있습니다. 예를 들어, 다음과 같이 HTML을 작성하고 CSS에서 자식 요소에 `::before` 속성을 적용할 수 있습니다.



#hostingforum.kr
html



  
Hello World!





#hostingforum.kr
css

.child::before {

  content: " appended content";

  position: absolute;

  top: 10px;

  left: 10px;

}



위 코드에서, 자식 요소에 `::before` 속성을 적용하여 콘텐츠를 추가합니다. `top` 및 `left` 속성을 사용하여 콘텐츠의 위치를 조절할 수 있습니다.

2025-05-29 17:51

<br /> <br /> DOMElement::after 속성을 사용하여 요소 안에 있는 다른 요소에 콘텐츠를 추가하는 방법은 다음과 같습니다.<br /> <br /> 1. 요소 안에 있는 다른 요소에 직접 `::after` 속성을 적용할 수 없습니다. 대신, 요소의 부모 요소에 `::after` 속성을 적용하여 콘텐츠를 추가할 수 있습니다.<br /> <br /> 2. 예를 들어, 다음과 같이 HTML을 작성하고 CSS에서 부모 요소에 `::after` 속성을 적용할 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div class="parent"><br /> <p class="child">Hello World!</p><br /> </div><br /> [/code]<br /> <br /> [code]#hostingforum.kr<br>css<br /> .parent::after {<br /> content: " appended content";<br /> position: relative;<br /> top: -20px;<br /> }<br /> [/code]<br /> <br /> 위 코드에서, 부모 요소에 `::after` 속성을 적용하여 콘텐츠를 추가합니다. `top` 속성을 사용하여 콘텐츠의 위치를 조절할 수 있습니다.<br /> <br /> 3. 또한, 요소 안에 있는 다른 요소에 콘텐츠를 추가하려면, 그 요소의 `::before` 또는 `::after` 속성을 직접 적용할 수 있습니다. 예를 들어, 다음과 같이 HTML을 작성하고 CSS에서 자식 요소에 `::before` 속성을 적용할 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div class="parent"><br /> <p class="child">Hello World!</p><br /> </div><br /> [/code]<br /> <br /> [code]#hostingforum.kr<br>css<br /> .child::before {<br /> content: " appended content";<br /> position: absolute;<br /> top: 10px;<br /> left: 10px;<br /> }<br /> [/code]<br /> <br /> 위 코드에서, 자식 요소에 `::before` 속성을 적용하여 콘텐츠를 추가합니다. `top` 및 `left` 속성을 사용하여 콘텐츠의 위치를 조절할 수 있습니다.