Что до этого действительно делает?

Итак, я прочитал документы и, вероятно, понимаю цель ::before и ::after. Если мое понимание правильное, они всегда должны работать в сочетании с другими элементами. Но веб-страница, на которую я смотрю, имеет что-то вроде этого:

<body>
    <div class="container-fluid">
        ::before
        <div> ... </div>
        ::after
    </div>
<body>

Я не могу понять, что здесь делают ::before и ::after?

Ответ 1

::before и ::after ссылаются на псевдоэлементы CSS, созданные до и после сопоставления элементов.

Псевдоэлементы обычно не отображаются в деревьях элементов HTML. Однако, если вы используете правильный инструмент для отладки (например, инспектор Chrome), вы можете увидеть эти специальные элементы. Поскольку в наши дни очень распространено стиль страницы с использованием псевдоселекторов, очень полезно иметь инструмент для отладки, который может отображать их.

Чтобы проверить это поведение у своего инспектора Chrome (или другого подходящего инструмента), попробуйте добавить некоторый контент к некоторым из этих псевдоэлементов с помощью CSS, например:

h1:before {
  content: 'before';
}

Ответ 2

Я предполагаю, что вы это видите, потому что инспектор хрома показывает его для проверки: http://www.youtube.com/watch?v=AcKlJbmuxKo

На самом деле они не находятся в исходном html, поданном с сервера, но добавлены только Chrome Inspector.

Вы можете использовать их для просмотра своей модели окна на экране и объявленных для них стилей.

Также проверьте это: fooobar.com/questions/91434/...

Ответ 3

::before и ::after являются псевдоэлементами, как вы можете видеть в этом примере:

CSS

.container-fluid>p::before{
    content: "HI";
}
.container-fluid>p::after{
    content: "Bee";
}

http://jsfiddle.net/vX2jW/ Вы можете прочитать больше здесь: http://css-tricks.com/almanac/selectors/a/after-and-before/