如何在我的html中輸入'：after'？

我已經把3個社交媒體圖標到我的網站，在這裏我要爲每一個圖標彩色背景。彩色背景需要分兩部分。第一部分是直線矩形，第二部分需要進一步編輯以創建所需的效果。如何在我的html中輸入'：after'？

因此，我需要能夠元素後的樣式::。我查看了我的源代碼，但無法在任何地方看到它。我可以在進入之前看到::但不在::之後。

有關代碼：

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" id="social-media-icons"> 
     <i class="fa fa-facebook-square fa-fw fa-lg" id="facebook-icon" aria-hidden="true"></i> 
     <i class="fa fa-twitter-square fa-fw fa-lg" id="twitter-icon" aria-hidden="true"></i> 
     <i class="fa fa-instagram fa-fw fa-lg" id="instagram-icon" aria-hidden="true"></i> 
</div>

我怎麼能去進入::後進入？我是否理解，雖然這樣的條目出現在html中，但是實際上並沒有直接編輯html？

來源

2017-03-06 Craig

這將需要在CSS做的，而不是HTML – Toxide82

我的CSS是有點生疏，但如果我記得沒錯：是不是以後在DOM字面上存在的一個項目，它是指到「僞元素」，即無論它是在元素被引用之後。 – GordonM

@GordonM是對的。這是一個「僞元素」，意思是「不是真正的元素」。你像'.someSelector CSS創建：後{}' –

它在CSS中使用僞元素來完成的。

例如：

i::after { 
    ... 
}

演示：http://www.codeply.com/go/2M4sgYmTw6

來源

2017-03-06 16:38:35

::before和::after（你應該使用::，單:只支持傳統的目的）是所謂的pseudo elements - 他們不存在於源代碼，但是一旦你的CSS被處理就插入。

您可以設置樣式，只需在樣式表中定義它。由於這種特殊的行爲，另外到正常的聲明，你必須定義其content的選項。通常這只是靜態內容，但很酷的是，您也有可能生成動態內容！

span::before{ 
 
     content: "☺"; 
 
     color:blue; 
 
     font-size:150%; 
 
    } 
 

 
    div::after{ 
 
     content: "dynamic content: "attr(data-value); 
 
    }

<span> Hello </span> 
 
<div data-value="Foo"></div>

來源

2017-03-06 16:50:19 Christoph

感謝您的見解，特別是關於'::'的使用。 – Craig

不客氣！隨時給予批准upvote ;-) – Christoph

如何在我的html中輸入'：after'？

回答

相關問題