Использование: before /: after Селекторов для добавления полей вокруг элементов - PullRequest
Новая
       4

Использование: before /: after Селекторов для добавления полей вокруг элементов

6 голосов
/ 20 сентября 2011

Я реализовал (измененную версию) «глубину» Джина Локлина, которая работает просто отлично, вот код: 

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

Но я бы хотел использовать селекторы: before &: after для добавления полей или отступов, вы знаете какой-то пробел, чтобы отделить форму от окружающего текста.

Это происходит после того, как я попытался использовать эти селекторы, чтобы дать некоторый интервал вокруг определенных абзацев, но безуспешно я перешел к их стилизации на основе их целевых атрибутов.

Я понимаю, что селекторы были разработаны в первую очередь для облегчения автотекста и что это очень легко сделать с помощью полей или отступов (добавлено после запросов ниже), разрывов строк, интервалов, пустого деления или даже использования JavaScript для создания элемент и. Но я хотел бы сделать это с: before &: after.

Вот пример кода, который я хотел бы получить, работая: 

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

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

Возможности, которые, я думаю, могут препятствовать тому, чтобы это работало ...: before /: after необходимо отображать на уровне блоков, поскольку они обычно встроены (но это не нужно для глубины?) И / или: до /: после требуется абсолютное позиционирование.

Заранее благодарим за ваш щедрый вклад.

1 Ответ

13 голосов
/ 20 сентября 2011

Попробуйте указать display: block;. Они не должны быть position: absolute;. 

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

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