使用：前/：後選擇器添加邊距元素周圍

Question

我實現了（修改版）基因洛克林的「深度」，這工作得很好，這裏的代碼：

body:before { 
    height: 10px; 
    width: 110%; 
    position: fixed; 
    top: -10px; 
    left: -10px; 
    z-index: 6; 
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    content: ""; 
} 

但我想用在：&之前：在選擇器添加邊距或填充之後，您知道某種間隙，可以將表單與周圍的文本分開。

這是在我嘗試使用這些選擇器爲特定段落提供一些間距而沒有成功之後，我轉向基於它們的目標屬性設計這些選擇器。

我意識到選擇器的設計主要是爲了實現自動文本，並且使用邊距或填充（下面添加下面的查詢），換行符，跨度，空分割，甚至使用JavaScript來完成此操作都非常簡單創建一個元素，並且。但我想這樣做：在&之前：之後。

這裏的示例代碼，我想獲得工作：

form:before { 
    height: 20px; 
    content: ""; 
} 

form:after { 
    height: 20px; 
    content: ""; 
    } 

的可能性，我認爲可以防止這種工作...：前/：後需要被顯示爲塊級，因爲他們通常是內聯的（但「深度」不需要這個？）和/或：之前/之後需要絕對定位。

非常感謝您的慷慨解答。

Answer 1

嘗試指定display: block;。他們不需要是position: absolute;。

form:after { 
    content: ' '; 
    display: block; 
    height: 20px; 
} 

form:before { 
    content: ' '; 
    display: block; 
    height: 20px; 
}