css中：：before和：：after僞元素的幾種用法

時間 2019-11-12

標籤 css 元素幾種用法欄目 CSS 简体版

原文原文鏈接

這兩個僞類下特有的屬性 content ，用於在 CSS 渲染中向元素邏輯上的頭部或尾部添加內容。注意這些添加不會改變文檔內容，不會出如今 DOM 中，不可複製，僅僅是在 CSS 渲染層加入css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		a {  
		    position: relative;  
		    display: inline-block;  
		    outline: none;  
		    text-decoration: none;  
		    color: #000;  
		    font-size: 32px;  
		    padding: 5px 10px; 
		  
		}  

		a:hover::before, a:hover::after { position: absolute; }  
		a:hover::before { content: "\5B"; left: -20px; }  
		a:hover::after  { content: "\5D"; right:  -20px; }


		.triangle{
		        width: 0;
		        height: 0;
		        border-left:50px solid red;
		        border-bottom:50px solid blue;
		        border-top:50px solid black;
		        border-right:50px solid purple
	    }

	    p:before{
	           content: "H"  /*:before和:after必帶技能，重要性爲滿5顆星*/
	       }
	       p:after{
	           content: "d"  /*:before和:after必帶技能，重要性爲滿5顆星*/
       }

    
       .test-div{
               position: relative;  /*平常相對定位*/
               width:150px;
               height: 36px;
               border:1px solid black;
               border-radius:5px;
               background: rgba(245,245,245,1)
           }
           .test-div:before,.test-div:after{
               content: "";  /*:before和:after必帶技能，重要性爲滿5顆星*/
               display: block;
               position: absolute;  /*平常絕對定位*/
               top:5px;
               width: 0;
               height: 0;
               border:6px solid transparent;
           }
           .test-div:before{
               left:-11px;
               border-right-color: rgba(245,245,245,1);
               z-index:1
           }
           .test-div:after{
               left:-12px;
               border-right-color: rgba(0,0,0,1);
               z-index: 0
       		}
	</style>
</head>
<body>
	<a href="">按鈕一</a>
	<a href="">按鈕二</a>
	<div class="triangle"></div>
	<p>ello Worl</p>
	<div class="test-div">ddd</div>
</body>
</html>

結果以下:html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。