Edit in JSFiddle

<p class="p1">각 개별 속성을 참고 하세요! 앞에 Note : 란 글자가 출력됩니다. </p>
<p class="p2">앞에 이미지가 출력됩니다. </p>
<p class="p3">
    <a href="#" class="list">앞에 숫자1이 출력됩니다. </a>
    <a href="#" class="list">앞에 숫자2이 출력됩니다. </a>
    <a href="#" class="list">앞에 숫자3이 출력됩니다. </a>
</div>    
<p class="p4"><a href="http://opentutorials.org/module/441"> / CSS Reference </a></p>
<p class="p5">CSS Reference</p>

.p1:before {
    content: "Note : ";
}
.p2:before {
    content: url(http://goo.gl/07GZC);
}
.p3 a {
    counter-increment: index;
    display:block;
}
.p3 a:before {
    content:counter(index);
}
.p4 a:before {
    content: attr(href);    
}
.p5:before {
    content: open-quote;
}
.p5:after {
    content: close-quote;
}