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

В этой статье мы познакомимся с псевдоэлементами ::first-line, ::first-letter, ::after, ::before и научимся их применять на практике.

Псевдоэлементы - это вид селекторов, которые могут задать стиль для элементов, которые явно не определены в структуре документа (::first-line, ::first-letter), а также добавлять контент до и после элементов с применением к нему стилей (::after, ::before).

Рассмотрим следующий код:

HTML код:

<body>
<p>Lorem ipsum dolor sit amet. Omnis voluptas nulla vero eos et iusto odio dignissimos. A sapiente delectus, ut aliquid. Aliquid ex ea voluptate velit esse, quam nihil impedit, quo minus. Consequuntur magni dolores eos, qui ratione voluptatem. Nobis est et molestiae consequatur, vel. Delectus, ut aliquid ex ea voluptate velit esse. Suscipit laboriosam, nisi ut labore et dolorum. Provident, similique sunt in ea voluptate velit esse quam.</p>
</body>

CSS код:

p::first-letter {
  font-size:200%;
  color: red;
}

p::first-line {
  font-weight:bold;
  color: blue;
}

p::before {
  content: "Начало. ";
}

p::after {
  content: " Конец";
  font-weight:bold;
  color:green;
}

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

Для того чтобы добавить псевдоэлемент к элементу или элементам веб-страницы, выбор которых может осуществляться с помощью селектора, используется следующая конструкция:

Использование псевдоэлементов в CSS

Примечание: несмотря на то, что в стандарте CSS 3 для указания псевдоэлемента используется именно двойное двоеточие, иногда Вы можете увидеть в силу исторических причин одно двоеточие, которое использовалось для указания псевдоэлементов в стандарте CSS 2.1. Все современные браузеры позволяют использовать как одно двоеточие, так и два для указания того, что дальше следует псевдоэлемент. Единственный браузер, который не понимает знак двойного двоеточия, является Internet Explorer 8.

Псевдоэлемент ::first-letter предназначен для задания стиля первому символу в тексте элемента. В основном он используется для увеличения размера этого символа посредством применения к нему свойств CSS и соответствующих значений.

HTML:
<p>Содержимое</p>

CSS:
p::first-letter {
font-size: 200%;
color: red;
}

Псевдокласс ::first-line позволяет установить стиль для первой строки текста блочного элемента.

HTML:
<p>Содержимое</p>

CSS:
p::first-line {
font-style: italic;
color: red;
}

Псевдоэлементы ::after и ::before предназначены для добавления контента с помощью CSS свойства content до и после содержимого элемента. Кроме свойства контент, Вы также можете добавить различные CSS свойства, которые будут применены к данному контенту, т.е. к контенту, который появляется до или после содержимого элемента.

Псевдоэлементы ::after и ::before

Рассмотрим следующие примеры:

  1. Заключим в кавычки (") содержимое всех элементов <p>, которые имеют класс qoute.
    HTML:
    <p class="qoute">Содержимое</p>
    
    CSS:
    p.qoute::before, p.qoute::after {
      content: '"';
    }
    
  2. Добавим к кавычкам дополнительные стили с помощью свойств CSS, которые изменят размер кавычек и их начертание.
    HTML:
    <p class="qoute">Содержимое</p>
    
    CSS:
    p.qoute::before, p.qoute::after {
      content: '"';
      font-size: 20px;
      font-weight: bold;
    }
    
  3. Создадим хлебные крошки (навигационные цепочки), используя псевдоэлементы ::after и ::before.
    HTML:
    <p>
      <a href="#">Главная</a>
      <a href="#">Статьи</a>
      <a href="#">Название статьи</a>
    </p>
    
    CSS:
    a {
      text-decoration: none;
      font-weight: bold;
      color: black;
    }
    
    a::after {
      content: "/";
    }
    
    a:first-child::before {
      content: ">>";
    }
    
    a:last-child::after {
      content: "";
    }
    

    Создание хлебных крошек с помощью ::after и ::before



       HTML и CSS 0    1507 +1

    Комментарии (0)

      Вы должны авторизоваться, чтобы оставлять комментарии.