Главная css Псевдоэлементы CSS

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

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

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

Синтаксис: 
селектор::Псевдоэлемен  /*двойное  двоеточие*/
 {CSS свойство: значение; ...
 }

 Псевдокласс начинается с двойного двоеточия  :: , но допускается использовать и одиночное двоеточие (:).

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

::before ::after

Псевдоэлементы ::before и ::after используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.

Псевдоэлемент ::before добавляет определённое содержимое перед каждым указанным элементом.

Псевдоэлемент ::after добавляет определённое содержимое после каждого элемента.

Как вставить на сайт иконку

1
Вставка иконки FontAwesome

<style>
  li::before {
    content: "\f00c  "; /*Символ иконки перед элементом списка*/
    font-family: 'FontAwesome';
    color:red;  
  }
  li {
    list-style: none; /*Убираем исходные маркеры*/ 
  }

2
Вставка "Контакты"
  p.contakt::before {
  content: "Наши контакты: "; color: maroon;   
} 
  p.contakt::after {
  content: "8 800 100-70-10 (support@gosuslugi.ru)";
  background: maroon; color: #fff; padding:3px 5px;    
  }  
</style>

<body>
  <ul>
    <li>Альфа</li>
    <li>Бета<li>
    <li>Гамма</li>
  </ul>

  <p class="contakt"></p>
</body>

Результат 1
  • Альфа
  • Бета
  • Гамма
Результат 2

 

3
Вставка символа в список

<style>
ul.credo 
    {margin-left:20px;
    font-size:1.15em;
    list-style-type: none;}
.credit li::before {position:relative; left:-0.5em;
    font-size:1.5em; color:teal;}
.credo li::before {content: "\203B";}
/*Символ иконки перед элементом списка*/
</style>

<ul class="credo credit">
    <li>Текст 1
    <li><a href="#">Ссылка 2</a>
    <li>Текст 3
    <li>Текст 4  
    </li>
</ul>

Результат
3

Примеры Как вставить символ css?

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

::first-line ::first-letter

Псевдоэлемент ::first-line – оформляет первую строку абзаца, позволяя определить свойства шрифта (font), цвета и заднего плана (color и background), интервал между словами (word-spacing), интервал между символами (letter-spacing), декоративное оформление текста (text-decoration), вертикальное выравнивание (vertical-align), трансформацию текста (text-transform), высоту строки (line-height) и параметры обтекания (clear).

Псевдоэлемент ::first-letter – оформляет первый символ абзаца, позволяя определить свойства шрифта (font), цвета и заднего плана (color и background), декоративное оформление текста (text-decoration), вертикальное выравнивание (vertical-align) – только если свойство float установлено в "none" (по умолчанию), трансформацию текста (text-transform), высоту строки (line-height), параметры обтекания (clear), отступы (margin), расстояние от обрамления (padding), параметры обрамления (border) и отделение от остального текста (float).

4 
<style>
  div.first p {color: green; font-size: 11pt}
  div.first p::first-letter {color: red; font-size: 150%} /*первый символ*/
  div.first p::first-line {color: navy}  /*первая строка*/  
</style>

<body>
 <div class="first">
   <p>Текст 1</p>
   <p>Текст 2</p>
   <p>Текст 3</p>
 </div>
</body>
4
Результат:

В этом примере прописано:

Отобразить первую строку абзаца темно-синим цветом, все первые буквы абзаца – красным и в 1,5 раза большего размера. Остальную часть абзаца – отобразить зеленым.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, expedita. Natus iste laboriosam unde temporibus sapiente, inventore alias quisquam ex aliquid, vel, omnis atque illum culpa magnam eum placeat officiis.

Пример оформления страницы "Цытаты А.В. Суворова"

 

Псевдоэлемент

::marker

Псевдоэлемент ::marker применяет стили к маркеру элемента списка, которые обычно содержит значок или номер.

HTML-элементы, у которые есть маркеры списка по умолчанию: <ol>, <ul>, <li>, <summary>.

Браузер IE не поддерживает псевдоэлемент ::marker.

5 
<style>
/* Стиль маркера списка */
li::marker {
  color: fuchsia;
  font-size: 1.3em;
}
</style>

<body>
<b>Псевдоэлементы:</b>
 <ol>
   <li>Текст 1</li>
   <li>Текст 2</li>
   <li>Текст 3</li>
   <li>Браузер IE</li>
 </ol>
</body>

Результат
5

Псевдоэлементы:
  1. Псевдоэлемент ::before
  2. Псевдоэлемент ::after
  3. Псевдоэлемент ::marker
  4. Браузер IE не поддерживает псевдоэлемент ::marker.