首頁 >web前端 >css教學 >CSS中偽元素before和after怎麼使用

CSS中偽元素before和after怎麼使用

不言原創: 2018-11-26 11:18:313412瀏覽

如何使用CSS中偽元素before和after？本篇文章就來跟大家分享關於CSS中偽元素before和after的使用方法。

::before和::after是什麼？

before和after的描述如下

元素::before {content:插入的内容;}
元素::after {content:插入的内容;}

content：輸入要插入的部分內容

要在content中插入字母和符號，請用「」括起來並輸入。
要在content中插入影像和聲音，請輸入url（目標路徑）。

也可以為相同元素指定before和after。

CSS3中before和after等偽元素使用::（雙冒號），但即使只有一個冒號，它在大多數瀏覽器中也能識別並正常工作。

支援的瀏覽器

支援:: before和:: after偽元素的瀏覽器：Chrome、Firefox3.5~、Safari4~、IE8 ~、Opera6~。

如何使用偽元素before和after？

下面是一個套用before和after的HTML檔案
（這是* html和css檔案位於同一目錄且外部樣式表的檔案名稱為「sample.css」的範例）

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
<h3>标题前加入标记</h3>
    <p>段落前插入图像</p>
  </body>
</html>

sample.css

h3::before{
  content:"◆";
}
p::before{
  content:url(img/luffys.jpg);
}

在此範例中，符號「♦」在

的標題之前插入，

的段落之前插入圖像檔案“img/luffys.jpg”。

它在瀏覽器上顯示如下：標題前有“◆”，在段落前面插入了一個圖像檔案。

CSS中偽元素before和after怎麼使用

以下是在同一元素上同時使用before和after的範例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <h3>在标题之前和之后加入标记</h3>
    <p>段落后插入图像</p>
  </body>
</html>

sample.css

h3 :: before {content："◆";} 
h3 :: after {content："◆";} 
p :: after {content：url（img/luffys.jpg）;}

在此範例中，符號「♦」插入

標題的開頭和結尾，圖像插入段落之後。

它在瀏覽器上顯示如下：在標題之前和之後添加符號，在段落之後顯示圖像。

CSS中偽元素before和after怎麼使用

最後解釋一下關於冒號的數量

#有兩種偽元素，: before /：after和:: before / :: after。

在css2中，寫一個冒號，如，: before /：after。

在css3中，寫兩個冒號，例如，:: before / :: after。

由於css3是最新的css，因此也可以說偽元素是:: before / :: after。

對於:: before / :: after，主瀏覽器相容。

但是，應該注意的是，css3的一部分語法與主瀏覽器並不相容。

以上是CSS中偽元素before和after怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css chrome css3 html 样式表伪元素

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3動畫屬性有哪些下一篇：css3動畫屬性有哪些

看更多