HTML 5開発シリーズの偽要素の真の意味

826 ワード

ぎじげんそ
偽の要素は実は1つの要素で、しかし本当の定義がなくて、しかし消えて効果は実は1つの行内の要素の効果です
::beforeは実は1つの要素の内部で、一番前に1つの行内の要素を追加しました;
表示モードを変更したり、幅を設定したりすると、背景にこの要素の本当の姿が見えます.
例:


	
		
		
		<style type="text/css">
			.content{
				margin: 200px;
			}
			span{
				width: 100px;
				height: 100px;
				background-color: red;
				display: block;
			}
			.content:hover::before{
				content: "";
				width: 100px;
				height: 100px;
				border: 10px solid yellow;
				float: left;
				box-sizing: border-box;
			}
		</style>
	
	
		<div class="content">
			<span/>
		</div>
	
</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>