before / after 속성을 이용하여 선택한 요소 앞 뒤로 자식 요소 생성하여 content를 추가해보자.

CSS – before, after

CSS에서 사용할 수 있는 :before, :after에 대해 알아보자.

:before

선택한 요소의 첫 자식으로 의사 요소를 하나 생성한다.

:after

선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다.

content

content 속성으로 문자를 넣을 수 있다.

html 태그는 삽입이 불가능하다.

html 태그를 삽입하고자 하는경우 jquery를 이용할 수 있다.

q 태그

이 예시에서는 q 태그의 앞,뒤로 content 추가하는 방법을 알아볼 수 있다.

q 태그 대신 blockquote를 이용해도된다.

q { quotes: "“" "”" "‘" "’"; }
q:before { content: open-quote; }
q:after { content: close-quote; }

<q>차가운 <q>적막</q> 속에 갇힌 밤</q>

ul li 태그

li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5rem 0.5rem 0.5rem 2rem;
background: lightgrey;
font-family: sans-serif;
}

li.done {
background: #CCFF99;
}

li.done:before {
content: '';
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3rem 0.25rem 0;
height: 1rem;
top: 1.3rem;
left: 0.6rem;
margin-top: -1rem;
transform: rotate(45deg);
width: 0.5rem;
}

<ul>
<li>Buy milk</li>
<li>Take the dog for a walk</li>
<li>Exercise</li>
<li>Write code</li>
<li>Play music</li>
<li>Relax</li>
</ul>

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done');
  }
}, false);

jQuery – before after

jQuery를 이용하여 HTML 태그를 삽입할 수 있다.

before

요소 앞에 컨텐츠를 삽입할 수 있다.

$(요소 이름).before(삽입할 컨텐츠); 와 같이 입력한다.
워드프레스에서는 jQuery(요소 이름).before(삽입할 컨텐츠); 이런식으로 입력한다.

$("div").before("<div>Please let me go</div>");

<div>
긴 어둠 속 날 꺼내줘
</div>

after

요소 뒤에 컨텐츠를 삽입할 수 있다.

$(요소 이름).after(삽입할 컨텐츠);와 같이 입력한다.
워드프레스에서는 jQuery(요소 이름).after(삽입할 컨텐츠); 이런식으로 입력한다.

$("div").after("<div>Just let me go</div>");

<div>
긴 어둠 속 날 꺼내줘
</div>

prepend

요소의 시작 태그 바로 뒤에 컨텐츠를 삽입할 수 있다.

$(요소 이름).prepend(삽입할 컨텐츠);
워드프레스에서는 jQuery(요소 이름).prepend(삽입할 컨텐츠); 이런식으로 입력한다.

$("div").prepend("
Please let me go
");

<div>
긴 어둠 속 날 꺼내줘
</div>

append

요소의 종료 태그 바로 앞에 컨텐츠를 삽입할 수 있다.

$(요소 이름).append(삽입할 컨텐츠);
워드프레스에서는 jQuery(요소 이름).append(삽입할 컨텐츠); 이런식으로 입력한다.

$("div").append("
Just let me go
");

<div>
긴 어둠 속 날 꺼내줘
</div>