Псевдоклассы и псевдоэлементы

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    form {
        background-color: #0b2852;
        border: 1px solid #e0f2ff;
        display: inline-block;
        padding: 1.5em;
        border-radius: 10px;
    }
    input {
        padding: .75em;
        border-radius: 5px;
    }
    button {
        padding: .75em;
        border-radius: 5px;
    }    
    button[type=submit] {
        background-color: #e0f2ff;
        color: darkslategray;
        font-weight: bold;
        border: 1px solid #1c2c1e;
    }
    button[type=submit]::before {
        content: '🔥 ';
    }    
    </style>
</head>
<body>
    <form action="https://google.com/search" method="get">
        <input type="text" name="q" id="">
        <button type="submit">Поиск</button>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:hover</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fcefee;
        }
        form {
            display: flex;
            flex-direction: column;
            width: 400px;
            background-color: #581b98;
            padding: .5em;
            border-radius: 10px;
            transition: all ease .25s;
        }
        form input {
            margin: .75em 0;
            padding: .5em;
            border-radius: 5px;
        }
        form label {
            text-align: center;
            color: white;
            font-weight: bold;
            font-size: large;
            font-family: sans-serif;
        }
        input[type=submit] {
            padding: .5em;
            background-color: #faee1c;
            color: black;
            font-weight: bold;
            border: 0;
            font-size: 1em;
            border-radius: 5px;
        }

        form:hover {
            box-shadow: 1px 1px 0 0 #9c1de7,
            2px 2px 0 0 #9c1de7,
            3px 3px 0 0 #9c1de7,
            4px 4px 0 0 #9c1de7,
            5px 5px 0 0 #9c1de7,
            6px 6px 0 0 #9c1de7;
            transform: translate(-6px, -6px);
        }
    </style>
</head>
<body>
    <form action="" method="get">
        <label for="name">Введите Имя:</label>
        <input type="text" name="name" id="name">
        <label for="email">Ваш email:</label>
        <input type="text" name="email" id="email">
        <input type="submit" value="Поиск">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        table { border-collapse: collapse; font-family: sans-serif; }
        th, td { padding: 8px 20px; border: 1px solid #ccc; }
        tr:nth-child(even) { background-color: #eeeeee; }
        tr:hover { background-color: yellow; }
    </style>
</head>
<body>
    <table>
        <tr><th>Игрок</th><th>Очки</th></tr>
        <tr><td>Аня</td><td>120</td></tr>
        <tr><td>Петя</td><td>95</td></tr>
        <tr><td>Лиза</td><td>88</td></tr>
        <tr><td>Миша</td><td>70</td></tr>
        <tr><td>Оля</td><td>64</td></tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .required::after { content: " *"; color: red; }
    </style>
</head>
<body>
    <form>
        <label class="required">Имя</label><br>
        <input type="text"><br>
        <label>Город</label><br>
        <input type="text"><br>
        <label class="required">Почта</label><br>
        <input type="email">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        input { padding: 10px; font-size: 18px; border: 2px solid #ccc; border-radius: 8px; outline: none; }
        input:focus { border-color: #6d4aff; }
    </style>
</head>
<body>
    <input type="text" placeholder="Щёлкни по мне">
</body>
</html>