小編給大家分享一下css中:before和:after的使用示例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)建站主營(yíng)賈汪網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā),賈汪h5成都小程序開發(fā)搭建,賈汪網(wǎng)站營(yíng)銷推廣歡迎賈汪等地區(qū)企業(yè)咨詢根據(jù)定義：before和：after是CSS的偽元素，我們可以使用它們?cè)谠貎?nèi)容之前或之后插入內(nèi)容，有很多的文章都給出了它們的基礎(chǔ)知識(shí)，所以我想寫一篇關(guān)于:before和:after在實(shí)際應(yīng)用的文章，表示我們正在使用它們。
語法
假設(shè)我們有以下簡(jiǎn)單的html標(biāo)記：
paragraph text
我們可以使用這樣的偽元素：
重慶分公司
重慶分公司
p:before {
content: "this is ";
font-weight: bold;
font-style: italic;
}結(jié)果是：
請(qǐng)注意，實(shí)際上是在內(nèi)容之前或之后添加元素。它不是出現(xiàn)在所選元素旁邊的東西，而是與其內(nèi)容相關(guān)。（推薦課程：css視頻教程）
圖標(biāo)
使用:before和:after實(shí)現(xiàn)一個(gè)小圖標(biāo)是非常好用的，因?yàn)槟憧梢蕴砑用總€(gè)CSS樣式屬性，所以可以將新創(chuàng)建的元素設(shè)置為一個(gè)塊元素并附加背景圖像。
同樣，我們有相同的標(biāo)記
段落文字
看下面的CSS代碼：
p:before {
content: "";
display: block;
background: url("icon.jpg") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}icon.jpg是從Photoshop導(dǎo)出的20x20圖像。以下是瀏覽器的外觀：
樣式外部鏈接
我在很多產(chǎn)品中看到了這一點(diǎn)。以不同方式設(shè)置指向外部資源的鏈接是一種很好的做法。這可以通過上述技術(shù)輕松完成。假設(shè)我們有以下段落的文字：
我們可以在該鏈接后添加一個(gè)小圖標(biāo)，表示它指向當(dāng)前域之外的頁面。
a {
text-decoration: none;
font-weight: bold;
color: #000;
}
a:after {
content: "";
display: inline-block;
background: url("icon-external.jpg") no-repeat top right;
width: 14px;
height: 12px;
}
面包屑（導(dǎo)航）
通常當(dāng)你做面包屑時(shí)，它們之間有鏈接和分隔符。而不是在DOM中添加元素，您可以使用純css實(shí)現(xiàn)相同的效果。
HTML：
只需幾行CSS：
a {
text-decoration: none;
font-weight: bold;
color: #000;
}
a:after {
content: " /";}
a:first-child:before {
content: " ? ";
}
a:last-child:after {
content: "";
}結(jié)果如下：
上述結(jié)果產(chǎn)生了一下效果。首先，在所有鏈接之前都有一個(gè)符號(hào)。我結(jié)合兩個(gè)偽元素的第一個(gè)子元素和before表示：“加入了?在第一鏈接之前”。最后，我做了同樣的事情，從列表中的最后一個(gè)鏈接中刪除分隔符。
我發(fā)現(xiàn)這非常有幫助。主要是因?yàn)槲也槐卦谏蓪?dǎo)航的代碼中關(guān)注這一點(diǎn)。我的意思是如果我必須用PHP構(gòu)建相同的東西我應(yīng)該寫一些額外的代碼。例如：
$links = array('Home', 'Team', 'Developers');
$str = '? ';for($i=0; $i'.$links[$i].'';
if($i < count($links)-1)
{
$str .= ' / ';
}
}
echo $str; 即在上面的代碼中，我在鏈接前添加了符號(hào)，并在PHP中添加了分隔符的一些邏輯。這有些不對(duì)，因?yàn)镻HP代碼不應(yīng)該對(duì)事物的外觀負(fù)責(zé)。
清除漂浮物
使用float屬性仍然很好。畢竟它對(duì)布局組織有很大幫助。但是，一旦元素浮動(dòng)，您需要另一個(gè)元素來清除浮動(dòng)。否則結(jié)果不太好。例如，以下代碼：
* html Home ProductsLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at purus ac lacus ultrices vehicula.
* css a { float: left; display: block; width: 100px; ... other styling }
將產(chǎn)生以下布局：
文本應(yīng)該在鏈接下面，而不是添加新的DOM節(jié)點(diǎn)，可以使用偽元素：before清除浮點(diǎn)數(shù)：
p:before {
content: "";
display: block;
clear: both;
}
引用
：before和：after非常適合引用文本。假設(shè)我們有一個(gè)想法，我們想要格式化它。
Martin Fowler said Any fool can write code that a computer can understand. Good programmers write code that humans can understand.
只有使用CSS才能實(shí)現(xiàn)以下效果：
span.quoted {
font-family: Georgia;
font-size: 16px;
display: block;
margin: 14px 0 0 0;
font-style: italic;
}
span.quoted:before {
content: "“";
font-size: 40px;
color: #999;
line-height: 0;
display: inline-block;
margin: 0 6px 0 0;
}
span.quoted:after {
content: " ”";
font-size: 40px;
color: #999;
line-height: 0;
display: inline-block;
margin: 0 0 0 4px;
}箭頭
在網(wǎng)頁設(shè)計(jì)時(shí)，有時(shí)候會(huì)為彈出窗口或工具提示添加一些好看的裝飾。直接編碼它們有點(diǎn)困難。幸運(yùn)的是，我們可以在沒有其他圖片或JavaScript時(shí)利用CSS文件解決這個(gè)問題。下面我們就來具體看一看。
開始，我們的標(biāo)記看起來像這樣
What is CSS?
Cascading Style Sheets is a style sheet language used for describing the presentation semantics of a document written in a markup language.
我們左邊有一個(gè)標(biāo)題，右邊有彈出窗口。我們需要在描述文本的左側(cè)添加這個(gè)小箭頭指向標(biāo)題；怎么解決這個(gè)問題呢？我們可以使用簡(jiǎn)單的邊框樣式制作箭頭并將這樣的元素附加到彈出窗口中。
h3 {
float: left;
width: 170px;
}
.popup {
float: left;
width: 340px;
background: #727272;
padding: 10px;
border-radius: 6px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
}
.popup:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #727272;
position: absolute;
top: 16px;
left: -12px;
}設(shè)計(jì)不同的標(biāo)題類型
目前有一個(gè)單頁網(wǎng)站的項(xiàng)目，項(xiàng)目中有不同部分的標(biāo)題。每個(gè)標(biāo)題都包含兩行。以下是最終設(shè)計(jì)的樣子：
這個(gè)就是我們利用：before和：after設(shè)計(jì)出來的：
h3 {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
h3:after {
display: inline-block;
margin: 0 0 8px 20px;
height: 3px;
content: " ";
text-shadow: none;
background-color: #999;
width: 140px;
}
h3:before {
display: inline-block;
margin: 0 20px 8px 0;
height: 3px;
content: " ";
text-shadow: none;
background-color: #999;
width: 140px;
}偽元素：after和：before元素是你可以設(shè)置HTML樣式而不添加新的DOM節(jié)點(diǎn)最好用的方法。
看完了這篇文章，相信你對(duì)css中:before和:after的使用示例有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！
