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

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Псевдоэлементы CSS</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <p>Текст первого<br>параграфа</p>
     <p>Текст второго<br>параграфа</p>
     <ul>
      <li>&alpha;&nbsp;– альфа</li>
      <li>&beta;&nbsp;– бета</li>
      <li>&gamma;&nbsp;– гамма</li>
     </ul>
     <p class="magenta">Выделите этот параграф мышью!</p>
    </body>
   
   </html>

   p:not(.magenta)::first-line		{ font-weight: bold; }
   p:not(.magenta)::first-letter	{ font-family: Arial; font-size: 30px; }
   p.magenta::selection			{ background-color: #ff0ff0; }
   ul					{ margin: 0; padding: 0; }
   li					{ list-style: none; margin: 0; padding: 0; }
   li::before				{ content: "\25BA"; font-size: 12px; padding-right: 5px; }

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

Задание:

Динамические псевдоклассы:

Файл index.html:

Файл styles.css:

Результат: