CSS標籤：之前和之後：

我正在學習CSS，我在識別屬性和理解某些語法方面遇到了一些問題。在下面的CSS中。CSS標籤：之前和之後：

據我所知，標籤是一個類和nav li與HTML中的tabs類中的類tab-current將使用相同的CSS應用。

例子：

 <div class="tabs"> 
      <nav> 
       <ul> 
        <li class="tab-current">Hey</li> 
        <li>hello</li> 
       </ul> 
      </nav> 
     </div>

但是我不太知道什麼:before和:after代表。有人能給我一個例子嗎？謝謝

來源

2014-07-14 Liondancer

請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/::before和https://developer.mozilla.org/en-US/docs/Web/CSS/ ::後 – j08691

他們在你選擇的元素之後和之前設置了一些東西。例如：

p:after { 
    content: 'hi! im after'; 
} 

p:before { 
    content: 'hi! im before'; 
}

如果您看到this fiddle，您會更好理解它。

來源

2014-07-14 16:46:44 lante

:before和:after是CSS選擇器，允許您在有問題的元素之前或之後添加內容。一個例子是一個鏈接後添加箭頭以顯示進度：

HTML

<div class="testAfter"><a>Arrow After this link</a></div> 
<div class="testBefore"><a>Arrow Before this link</a></div>

CSS

.testAfter:after{ 
    content:"\25B6" 
} 
.testBefore:before{ 
    content:"\25C0" 
}

小提琴顯示： http://jsfiddle.net/yPkVL/1/

您可以添加各種事情;圖像，文字等。您可以對它們進行設計並添加不同的位置。你可以做各種事情。這就像在問題div之前或之後添加額外的div，而無需更改HTML標記。

參考：

Before

After

來源

2014-07-14 16:47:33 ntgCleaner

的W3School explains it pretty well，你讀了起來，不懂的東西？

本質上，它意味着你將在之前已經存在的內容之前插入任何內容：之前的內容。

：之前和之後是選擇器，它們用於選擇你想要的樣式。

的example on w3schools is as follows：

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     p::before 
     { 
     content:"Read this -"; 
     } 
    </style> 
    </head> 

    <body> 
    <p>My name is Donald</p> 
    <p>I live in Ducksburg</p> 

    <p><b>Note:</b> For ::before to work in IE8, a DOCTYPE must be declared.</p> 

    </body> 
</html>

這樣做是打印出來： Read this - My name is Donald和Read this - I live in Duksburg

後，將esentially做同樣的事情。

有

來源

2014-07-14 16:47:40

:before和:after創建僞元素「孩子」，因爲他們被應用到元素。它們通常用於某些樣式或錯誤消息。

小提琴：http://jsfiddle.net/XjUM8/1/

div:before { 
    content: "Before"; 
    background: red; 
} 

div:after { 
    content: "After"; 
    background: blue; 
    color: white; 
}

您還可以將其設置爲顯示在懸停

小提琴：http://jsfiddle.net/XjUM8/2/

div:hover:before { 
    content: "Before"; 
    background: red; 
} 

div:hover:after { 
    content: "After"; 
    background: blue; 
    color: white; 
}

而且，看看MDN： Before & After

來源

2014-07-14 16:49:17 Adjit

:after和:before被稱爲僞元素。他們習慣通過CSS向DOM注入一些內容。例如，假設你想在每個針對外部網站的鏈接之後添加一個圖標（我們假設這些鏈接href都以「http：//」開頭）。這將是一個真正的痛苦脖子嘗試和手動追加。使用CSS僞元素:after，你可以簡單地做這樣的事情：

a[href^="http://"]:after { 
    content:url('href.png'); 
}

和Bam！你很好走。

:after和:before允許您只需注入一些文字或圖像，但它們也可以使用in many creative ways。

要小心的是，它們可以應用到除「替換元素」任何東西：這意味着你將無法使用這些僞元素的標記，如<input>，<textarea>，<object>，<img>等。

來源

2014-07-14 17:02:29

CSS標籤：之前和之後：

回答

相關問題