CodeLeom/pseudo-element.html

## pseudo-element.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Elements</title>
    <style>
        ::marker {
            color: red;
        }
        ul ::marker{
            font-size: 1.5em;
        }
        ol ::marker {
            font-size: 1.2em;
        }
        summary::marker {
            content: '\002B'' ';
        }
        details[open] summary::marker{
            content: '\2212'' ';
        }
        /* ::before ::after pseudo element */
        div::before {
            content: "I am Before";
            color: green;
        }

        div::after {
            content: "I am After";
            color: black;
        }
        .diff {
            color: coral;
        }

        /* ::selection {
            background: black;
            color: tomato;
        } */

        p:nth-of-type(2)::selection{
            background: darkblue;
            color: yellow;
        }

        input::placeholder{
            color: darkcyan;
        }
    </style>
</head>
<body>
    <p>first paragraph</p>
    <h1>Marker</h1>
    <ul>
        <li>stephanie</li>
        <li>perpetual</li>
    </ul>
    <ol>
        <li>Precilia</li>
        <li>Iveren</li>
    </ol>
    <details>
        <summary>Open for more content</summary>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum iste, porro minima consequatur inventore sunt fuga, animi quam, iusto quia qui architecto pariatur omnis dolorem tempora? Quas magni cumque unde.</p>
        <p>kyenpya is asking</p>
        <button>stephanie</button>
    </details>

    <h2>::before & ::after Pseudo Element</h2>
    <div class="diff">
        I am a text written by Oreofe
    </div>

    <h2>::selection pseudo element</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta obcaecati non sed quisquam, labore, et eos hic rem nemo quia reprehenderit odio accusantium illo voluptatum ex, ad ut omnis.</p>
    <p>Stephanie Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi optio saepe quibusdam autem alias totam iste blanditiis illum dolorum doloribus, quod vel similique minus ea natus atque hic. Consequuntur, labore?</p>

    <label for="email">Email Address</label>
    <input type="email" id="email" placeholder="enter stephanie's email">


    <h1>Read about ::cue pseudo element</h1>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pseudo Elements</title>
	<style>
	::marker {
	color: red;
	}
	ul ::marker{
	font-size: 1.5em;
	}
	ol ::marker {
	font-size: 1.2em;
	}
	summary::marker {
	content: '\002B'' ';
	}
	details[open] summary::marker{
	content: '\2212'' ';
	}
	/* ::before ::after pseudo element */
	div::before {
	content: "I am Before";
	color: green;
	}

	div::after {
	content: "I am After";
	color: black;
	}
	.diff {
	color: coral;
	}

	/* ::selection {
	background: black;
	color: tomato;
	} */

	p:nth-of-type(2)::selection{
	background: darkblue;
	color: yellow;
	}

	input::placeholder{
	color: darkcyan;
	}
	</style>
	</head>
	<body>
	<p>first paragraph</p>
	<h1>Marker</h1>
	<ul>
	<li>stephanie</li>
	<li>perpetual</li>
	</ul>
	<ol>
	<li>Precilia</li>
	<li>Iveren</li>
	</ol>
	<details>
	<summary>Open for more content</summary>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum iste, porro minima consequatur inventore sunt fuga, animi quam, iusto quia qui architecto pariatur omnis dolorem tempora? Quas magni cumque unde.</p>
	<p>kyenpya is asking</p>
	<button>stephanie</button>
	</details>

	<h2>::before & ::after Pseudo Element</h2>
	<div class="diff">
	I am a text written by Oreofe
	</div>

	<h2>::selection pseudo element</h2>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta obcaecati non sed quisquam, labore, et eos hic rem nemo quia reprehenderit odio accusantium illo voluptatum ex, ad ut omnis.</p>
	<p>Stephanie Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi optio saepe quibusdam autem alias totam iste blanditiis illum dolorum doloribus, quod vel similique minus ea natus atque hic. Consequuntur, labore?</p>

	<label for="email">Email Address</label>
	<input type="email" id="email" placeholder="enter stephanie's email">


	<h1>Read about ::cue pseudo element</h1>
	</body>
	</html>