Użycie: Przed/Po Selektory dodać marginesy wokół Elements

Question

I wdrożone (zmodyfikowanej wersji) Gene Locklin za „głębię”, który działa dobrze, oto kod:

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: ""; 
} 

Ale chciałbym użyć the: before &: po selektorach, aby dodać marginesy lub dopełnienie, znasz pewien rodzaj luki, aby oddzielić formularz od otaczającego tekstu.

To przychodzi po tym, jak próbuję użyć tych selektorów, aby nadać trochę odstępów wokół określonych akapitów, bez powodzenia odwróciłem się do stylizowania ich na podstawie ich atrybutów docelowych.

Zdaję sobie sprawę, że selektory zostały zaprojektowane głównie w celu ułatwienia automatycznego wpisywania tekstu i że jest to całkowicie łatwe z marginesami lub dopełnieniem (dodane do poniższych zapytań), podziałem wierszy, rozpiętościami, pustym podziałem lub nawet użyciem JavaScript do stwórz element, a. Ale chciałbym to zrobić z: przed &: po.

Oto przykładowy kod, który chciałbym dostać pracę:

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

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

Możliwości Myślę mogą uniemożliwiać wykorzystanie tego mechanizmu ...: Przed/Po muszą być wyświetlane jako blok poziomie jak oni są zwykle inline (ale "głębokość" tego nie potrzebuje?) i/lub: przed /: po wymaganiu bezwzględnego pozycjonowania.

Z góry dziękujemy za hojne dane wejściowe.

Answer 1

Spróbuj podać display: block;. Nie muszą być position: absolute;.

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

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