가상요소

: 혹은 ::이 붙은 애들이 가상요소이다.

::before ::after가 맞지만 익스플로러 6, 7버전에 적용이 안되기 때문에 웹 표준화 및 최적화를 해야한다면 :before :after 싱글콜론으로 사용하길 권장한다고 한다.

a 태그에 title을 달고, 가상요소 content: attr(title)를 주면 title의 글이 변경돼도 디자인이 유지된다.

<div class="method">
	fadein
	<div class="method-list">
		<a class="text" title="글줄 길이가 이만큼 늘어나도 먹히나요?"></a>
	</div>
</div>

.method {
    font-size: 1.4rem;
    border-radius: 0.3em;
    background-color: #78c137;
    float: left;
    padding: 0.3em;
    color: white;
    line-height: 2.4;
    margin-right: 0.3em;
}
.method::before {
    content: '.';
    float: left;
}
.method-list {
    float: right;
}
.method-list::before {
    content: '(';
    float: left;
}
.method-list::after {
    content: ')';
    float: right;
}
.text::after {
    content: attr(title);
}
.type {
    white-space: nowrap;
}