От слова псевдоэлемент уже можно предположить, что это некий элемент, а слова before(с английского) - до и after - после. То есть у нас есть элемент до и после. И так оно и есть, псевдоэлемент before - это элемент, который стоит перед началом того элемента, где мы и объявляем этот псевдоэлемент. А after - после нашего элемента, где мы объявили псевдоэлемент after.
Использовать их очень просто, в том элементе, где они нужны, необходимо прописать два двоеточия и слово либо before либо after, вот так, на примере тега <p class="pseudo"> с классом pseudo:
Также вы наверное увидели в стилях, что после объявления псевдоэлемента мы поставили не часто встречающееся свойство - content. Это свойство отвечает, какая текстовая информация будет содержаться в псевдоэлементе. И, как говорилось выше, псевдоэлемент before стоит до нашего элемента, где мы его вызываем, а after - после.
Поэтому, в браузере мы увидим, что в теге <p> появились еще слова, стоящие до и после нашего "рыбного" текста, прописанного в HTML в теге <p>, хотя эти слова в HTML-разметке мы не писали. И эти слова - это текст, прописанный в свойстве content в псевдоэлементах before и after. В данном случае в before - это слово BEFORE, а в after - это After.
Также ниже в стилях прописаны свойства типа font, которые и применились только к псевдоэлементам, но не к тексту в теге <p>.
Это font-family, это font-size, это font-weight и text-transform.
Это было пояснением того, что такое ::after и ::before, кстати, также их можно писать и через одно двоеточие - :after и :before. Но все же лучше через два двоеточия, для лучшего понимания что перед нами стоит псевдоэлемент.
В следующей статье будет рассказано о применениях псевдоэлементов, о том, как с помощью них верстать достаточно сложные на первый взгляд элементы.
Подписывайтесь на канал, чтобы не пропустить следующие статьи, а также предлагайте свои темы на выбор в группе ВКонтакте в описании канала.