<progress id="nc499"><pre id="nc499"><rt id="nc499"></rt></pre></progress>

<dd id="nc499"><track id="nc499"><dl id="nc499"></dl></track></dd>
  • <nav id="nc499"></nav>

    <span id="nc499"></span>

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

    來源:DIVCSS5 2021-04-13 10:44:51
    ::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>
     <head></head>
     <body>
      HTML    
      <metacharset="utf-8" /> 
      <linkrel="stylesheet"href="sample.css"type="text ss"="">   
       <h3>標題前加入標記</h3> 
       <p>段落前插入圖像</p>   sample.css h3::before{ content:&quot;◆&quot;; } p::before{ content:url(img/luffys.jpg); }
      </linkrel="stylesheet"href="sample.css"type="text>
     </body>
    </html>

    原文出處:http://www.divcss5.com/css3-style/c54485.shtml
    版權聲明:本文來源地址若非本站均為轉載,若侵害到您的權利,請及時聯系我們,我們會在第一時間進行處理。