Таинственные псевдоэлементы в css before и after. Отличие от псевдоклассов
Привет, друзья. Очень часто при разборе очередного кода мы можем встретить так называемые псевдоэлементы css :before и :after. Причем при использовании этих псевдоэлементов у скульптора сайтов всегда получаются отличные эффекты на css.
Итак, самое главное, что нужно отметить в этой статье это то, что всё-же :before и :after не являются всевдоклассами, они являются псевдоэлементами. В общем обычный элемент, только с приставкой «псевдо», значение которой, я думаю, вы понимаете.
Отличие псевдоэлементов от псевдоклассов.
Я думаю мы не будем сейчас вдаваться в подробности различий между двумя этими понятиями, так как на это может уйти много времени, поэтому будут краток. Псевдокласс, название говорит само за себя, позволяет нам воздействовать на элемент. Это тоже самое, когда мы добавляем или, как говорят, определяем класс для какого-либо элемента сайта или html-тега. Например:
<p>Привет, это WAVIFUN</p> /* <p> - это html-тег, обозначающий параграф */ <p class="text">Привет, это WAVIFUN</p> /* тот же самый html-тег, но с классом "text" */
Добавление класса к элементу позволит нам воздействовать на него иначе, чем на <p></p> без класса, например:
Теперь добавим к классу «text» псевдокласс :hover, который позволяет нам также воздействовать на элемент, но только при наведении.
Теперь рассмотрим псевдоэлементы :after и :before. Также как и с псевдоклассом, псевдоэлемент, название говорит само за себя, позволяет нам добавить элемент к существующему элементу. Например, выведим подсказку для html-элемента <p></p> с классом «text»:
.text:before { content: "Наведи курсор"; }
Отличия между :after и :before заключается только в том, что псевдоэлемент :after позволяет вывести псевдоэлемент после html-тегом, а :before — перед html-тегом. Это легко запомнить, потому что «before» с английского переводится «перед», а «after» — переводится «после». Псевдоэлементам, также как и обычным элементам можно добавлять css правила. И еще одна, не мало важная вещь, чтобы не путать псевдоэлемент с псевдоклассом разработчики решили, что псевдоэлементы будут прописываться с двумя двоеточиями ::before, ::after — это, кстати, не принципиально, можно и с одним двоеточием.
И еще несколько примеров применения псевдоклассов