偽元素

不存在於 document tree (DOM)，符號 ::

前方插入 ::before

.block::before {
    content: 'David ';
}

<div class="block">Say Hi!</div>

demo

由於不存在於 DOM 內，無法選取

content 為必要屬性，如沒有此屬性，::before 無法生效

.block::before {
    content: attr(data-name) ' ';
}

<div class="block" data-name="David">Say Hi!</div>

demo

content 也可以搭配 attr 抓取元素本身屬性數值來呈現

自訂 ul li icon

後方插入 ::after

.block::after {
    content: ' David';
}

<div class="block">Hello</div>

demo

文字反白 ::selection

.blue {
    height: 50px;
    line-height: 50px;
    border: 1px solid #dedede;
    padding: 10px;
}

.blue::selection {
    background: blue;
    color: #fff;
}

<div class="blue">Select Me Show Blue.</div>

demo

第一行 ::first-line

.block::first-line {
    color: red;
}

<div class="block">
    我是誰?<br />
    我在哪?
</div>

demo

第一個字 ::first-letter

.block::first-letter {
    color: red;
    font-size: 40px;
}

<div class="block">
    我是誰?<br />
    我在哪?
</div>

demo