::before {
    content: /* value */;
    /* 가상 요소를 스타일할 속성들 */
}
p::before {
    content: "👉";
    vertical-align: 0.2em;
    margin-right: 0.3em;
}
<p>
    문단의 콘텐츠입니다.
</p>
실제 적용된 모습
<p>
    <before>👉</before> <!-- <before>라는 태그는 없습니다. 설명을 돕기위해 가상으로 마크업한 것입니다. -->
    문단의 콘텐츠입니다.
</p>
button::before {
    content: "🧡";
}
<button type="button"></button>
실제 적용된 모습
<button type="button" aria-label="좋아요!"></button>
실제 적용된 모습
h2::before {
    content: ""; /* <= 여기를 주목하세요. */
    display: block;
    width: 2em;
    height: 0.3em;
    background-color: #000;
    margin-bottom: 0.3em;
}
<h2>가상 요소 선택자</h2>
input::before {
    content: "🧡";
}
img::before {
    content: "🧡";
}
<nav>
    <ul>
        <li><a href="">제품 보기</a></li>
        <li><a href="">개인정보처리방침</a></li>
        <li><a href="">고객센터</a></li>
    </ul>
</nav>
ul {
    display: flex;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
li:not(:first-child)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.8em;
    background-color: rgba(0, 0, 0, .6);
    margin: 0 1.1em;
    vertical-align: -0.06em;
    white-space: nowrap;
}
실제 적용된 모습
<a href="">뒤로 가기</a>
a {
    color: inherit;
    text-decoration: none;
    padding: 0.5em 1em;
    background-color: #fff;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: inline-flex;
    align-items: center;
}
a::before {
    content: "";
    display: inline-flex;
    width: 0.5em;
    height: 0.5em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotateZ(45deg);
    margin-right: 0.2em;
}
실제 적용된 모습
::before 가상 요소 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
::before 1 12 1.5 4
Animationtransition 지원 26 12 4 10.1