::before和::after偽元素的妙用

番茄西紅柿發(fā)布于2019-04-23 13:29 / 2206人閱讀

摘要：下面是偽元素和偽元素的具體用法和使用規(guī)則作用在標(biāo)簽前后添加字符串使用規(guī)則后面一定要用把要添加的內(nèi)容括起來，否則是無法顯示的括號(hào)不一定需要添加。

場(chǎng)景：

假如有一天，你的在寫一個(gè)前端項(xiàng)目，是關(guān)于一份點(diǎn)餐商家電話信息表，你啪塔啪塔地寫完了，突然間項(xiàng)目經(jīng)理跑過來找你，要求你在每一個(gè)商家的電話號(hào)碼前都添加一個(gè)電話符號(hào)，來使得電話號(hào)碼更直觀和頁面更美觀。這個(gè)時(shí)候你就糾結(jié)了，這不是折磨人嗎？這不是要我在每個(gè)電話號(hào)碼前都添加一個(gè)標(biāo)簽？這要整到猴年馬月？搞不好還會(huì)出現(xiàn)標(biāo)簽浮動(dòng)的問題。

這個(gè)時(shí)候::after偽元素和::before偽元素就是救星了，在css中有這么兩個(gè)偽類，允許通添加偽元素在html元素前/后添加內(nèi)容。

這里我簡(jiǎn)單寫了一個(gè)demo

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<style>
.phone-number{
    font-size: 14px;
    font-weight: 600;}

.phone-number::before{
    content: 260E;
    font-size: 22px;
    color: red;
}
style>
head>

<body>
    <div class=phone-number> 13300000000div>
    <div class=phone-number> 13300000001div>
    <div class=phone-number> 13300000002div>
    <div class=phone-number> 13300000003div>
    <div class=phone-number> 13300000004div>
body>
html>

實(shí)現(xiàn)的效果如下

每一個(gè)號(hào)碼都有一個(gè)class屬性，我只需要對(duì)這個(gè)class屬性寫一次css渲染層和添增上

:: before偽元素就可以實(shí)現(xiàn)這個(gè)功能了。顯然這比一個(gè)個(gè)添加標(biāo)簽要輕松得多。

可能有人會(huì)問，這個(gè)的符號(hào)是怎么來的？html官方規(guī)定了一些特殊符號(hào)的unicode碼，具體可以看http://www.cnblogs.com/starof/p/4718550.html。

下面是:: before偽元素和:: after偽元素的具體用法和使用規(guī)則

（1）content:’()’

作用：在標(biāo)簽前/后添加字符串

使用規(guī)則：content后面一定要用‘’把要添加的內(nèi)容括起來，否則是無法顯示的（括號(hào)不一定需要添加）。

例如：

在

￥80元

之后添加如下css裝飾代碼：

p::after{
         content:門市價(jià)100元;
         font-size: 14px;
         text-decoration: line-through;
         color: grey;
}

（2）content:url(‘圖片地址’)

作用：在標(biāo)簽前/后添加圖片（圖片通過網(wǎng)絡(luò)url實(shí)時(shí)加載）

使用規(guī)則：必須用url()引入需要添加的圖片，道理跟background的設(shè)置一樣。圖片的地址也需要用‘’括起來。

例如：

在

10086

添加css裝飾代碼

a::before{
    content:url(http://www.10086.cn/images/index/logo.png);
}

（3）清除浮動(dòng)

::after{

content : ’’ ;

display:block;

}

用法是設(shè)置content的為空字符串

關(guān)于清除浮動(dòng)的一些可用方法有很多種，我在這里就不展開來說了。

用人可能會(huì)說，用法（1）在p標(biāo)簽后面添加內(nèi)容，直接在html代碼里面的p標(biāo)簽后面再增加一個(gè)p標(biāo)簽不就行了嗎？為什么還要用這種方法呢？

可以思考一下，通過在后面添加一個(gè)p標(biāo)簽，同時(shí)也需要用css代碼去裝飾這個(gè)新添加上去的標(biāo)簽。顯然，代碼量上，后者比前者多了，而且后者在html中新增了一個(gè)DOM節(jié)點(diǎn)，如果數(shù)量很多時(shí)，解析器在解析時(shí)難免會(huì)增加一定的時(shí)間。而前者沒有這種問題，而且還能更好實(shí)現(xiàn)表現(xiàn)層和樣式層的分離式開發(fā)。

最后值得知道的是，使用::before和::after偽元素這種添加內(nèi)容的方式，只是在css渲染頁面的時(shí)候添加上去的，在DOM節(jié)點(diǎn)上是查不到這些添加上去的內(nèi)容的。所以，一般不要添加實(shí)際的內(nèi)容。意味著除了文本內(nèi)容和圖片/icon之外的html標(biāo)簽是無法添加進(jìn)去的。