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

селектор : псевдо - элемент { свойство : значение }

Классы CSS также могут использоваться с псевдо-элементами -

селектор . Класс : псевдо - элемент { свойство : значение }

Наиболее часто используемые псевдо-элементы заключаются в следующем:

Свойство Описание
:first-lineИспользуйте этот элемент для добавления специальных стилей в первую строку текста в селекторе.
:first-letterИспользуйте этот элемент, чтобы добавить специальный стиль к первой букве текста в селекторе.
:beforeИспользуйте этот элемент для вставки некоторого содержимого перед элементом.
:afterИспользуйте этот элемент для вставки некоторого содержимого после элемента.

Псевдо-элемент :first-line

В следующем примере показано, как использовать элемент :first-line для добавления специальных эффектов в первую строку элементов документа.

< html>
   < head>
      < style type="text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      < /style>
   < /head>
   < body>
      < p class="noline"> This line would not have any underline because this belongs to  noline class.< /p>
     
      < p>The first line of this paragraph will be underlined as defined in the CSS rule above.
		Rest of the lines in this paragraph will remain normal.
		This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element.< /p>
   < /body>
< /html>

Это приведет к следующему результату -


Первая строка этого абзаца будет подчеркнута, как определено в правиле CSS выше. Остальные строки в этом абзаце останутся нормальными. В этом примере показано, как использовать: элемент первой строки pseduo для реализации первой строки любого элемента HTML.

Псевдо-элемент : first-letter

В следующем примере показано, как использовать элемент :first-letter для добавления специальных эффектов к первой букве элементов в документе.

< html>
   < head>
      < style type="text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      < /style>
   < /head>
   < body>
      < p class="normal"> First character of this paragraph will be normal and will have font size 10 px;< /p>
      
      < p>The first character of this paragraph will be 5em big  as  defined in the CSS rule above.
		Rest of the characters in this paragraph will remain normal.
		This example shows how to use :first-letter pseduo element
		to give effect to the first characters  of any HTML element.< /p>
   < /body>
< /html>

Это приведет к следующему результату -


Псевдо-элемент :before

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

< html>
   < head>
      < style type="text/css">
         p:before
         {
            content: url(/images/bullet.gif)
         }
      < /style>
   < /head>
   < body>
      < p> This line will be preceded by a bullet.< /p>
      < p> This line will be preceded by a bullet.< /p>
      < p> This line will be preceded by a bullet.< /p>
   < /body>
< /html>

Это приведет к следующему результату -


Псевдо-элемент :after

В следующем примере показано, как использовать элемент :after для добавления какого-либо элемента.

< html>
   < head>
      < style type="text/css">
         p:after
         {
            content: url(/images/bullet.gif)
         }
      < /style>
   < /head>
   < body>
      < p> This line will be succeeded by a bullet.< /p>
      < p> This line will be succeeded by a bullet.< /p>
      < p> This line will be succeeded by a bullet.< /p>
   < /body>
< /html>

Это приведет к следующему результату -



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok