freeCodeCamp/guide/russian/css/before-selector/index.md

title	localeTitle
Before Selector	Перед селектором

Перед селектором

CSS :: before selector может использоваться для вставки чего-либо перед содержимым элемента или элементов. Это позволяет дизайнеру выполнять любой дизайн css перед содержимым в элементе. Он используется путем присоединения :: before к элементу, для которого он должен использоваться.

Давайте посмотрим на некоторые примеры:

p::before { 
    content: ""; 
    border: solid 5px #ccc 
 } 
 
 span.comment::before{ 
  content: "Comment: "; 
  color: blue; 
 } 

<p> To infinity and beyond</p> 
 <p> I am buz lightyear, I come in peace.</p> 
 
 <span class="comment"> May the force be with you</span> 
 <br/> 
 <span> Do. Or do not. There is no try</span> 

В приведенном выше примере мы добавляем серая граница перед каждым элементом абзаца на странице, и мы также добавляем комментарий слова синим до каждого элемента span с комментарием класса.

Вы можете посмотреть эту демонстрацию здесь https://jsfiddle.net/398by400/

Определение и использование

::before является одним из селекторов псевдоэлементов CSS, которые используются для стилизации определенных частей элемента. В этом случае мы можем вставлять содержимое перед некоторым HTML-элементом из CSS. Хотя мы увидим контент на странице, он не является частью DOM, что означает, что мы не можем манипулировать им из Javascript. Один трюк для решения этой проблемы: передача содержимого атрибутом данных и использование jQuery для его управления. Вот пример использования:

   p::before { 
     content: "Hello "; 
   } 

<p>world!!</p> 

Это покажет Hello world!! на странице.

Не только строки, также изображения, счетчики или даже ничего («», полезные для clearfix) могут быть вставлены в attitute content , но не в HTML . Есть много интересных вещей, которые можно сделать с помощью ::before и after творческим способом. Вы можете взглянуть на следующую ссылку, если вам интересно: целая куча удивительных элементов псевдоэлементов может сделать

Одиночная двоеточие против двойной толстой кишки

Немного обсуждается правильный способ использования псевдоэлементов: старый стиль single-colon ( :before ), используемый в спецификациях 1 и 2 CSS, в сравнении с рекомендацией CSS3, double-colon ( ::before ), в основном для «установления дискриминация между псевдоклассами и псевдоэлементами » . Но по соображениям совместимости единственная двоеточие все еще принимается. Говоря о совместимости, IE8 поддерживает только одноточечную запись.

Дополнительная информация:

W3Schools CSS Псевдоэлементы

CSS-Tricks :: after / :: before

Выбор и управление псевдоэлементами CSS, такими как :: before и :: после использования jQuery