<style?type="text/css">
?.wrap{
????width:200px;
????height:200px;
????text-align:center;
????line-height:200px;
????background-color:#369;
????margin:20px?auto;
?}
?p{
????position:relative;
????text-align:center;
????font-size:15px
????color:red;
????padding:20px;
????border:1px?solid?red;??
????margin:30px;
?}
/*?明確表示了，after在<p>的文本的意思就是在元素的內容的前后添加內容?*/
?p::after{
????content:"";
????position:absolute;
????background-color:yellow;
??
????top:0px;????????
????bottom:0px;????????
????left:70%;????????
????right:50px;
?}?
?p::before{?????
????content:"?";????????
????position:absolute;??
????background-color:blue;
????
????top:0px;????????
????bottom:0px;????????
????left:70%;????????
????right:50px;?/*?before和after處在用一個位置，為什么after會覆蓋掉before的樣式??*/?}????
</style>?<body>
????<div?class="wrap">This?is?a?content</div>
????<p>This?is?a?passage</p>
?</body>代碼如上。我看了一些解析before和after這兩個偽元素用法的視頻代碼講解，但是仍存有一些疑問。1、before和after是可以在元素內容的前后添加內容，通常結合content使用。我只知道如果<p>HelloWorld</p>使用before和after 的content:"Something add here"，就會在HelloWorld前后添加content。2、【新手提問】但是如果我把before和after當成盒子模型來設置，設置在同一個位置，設置不同的背景顏色，為什么after會覆蓋before？（如上述代碼）3、【新手提問】before和after本質是在元素內容的前后添加內容，但是他們可以隨意設置位置，就無所謂前后一份，那么他們有什么用？4、【新手提問】如果在<div></div>中使用before和after的話，那這個前后添加內容是指哪里的前后？我一直以為 before是在div的上面，即覆蓋div，而after就是在盒子的后面，即在下面 被div覆蓋。如果不是這樣，在div中的before和after的前后指的是哪里？
1 回答
- 1 回答
- 0 關注
- 1762 瀏覽
添加回答
舉報
0/150
提交
取消