Pseudo-Elements Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Pseudo-Elements Selector</title>
<style>
h2::before {
content: 'Demo ';
}
.para1::first-letter {
color: blue;
font-size: 3em;
font-weight: 600;
}
.para1::after {
content: 'The "para1" ends here.';
}
.para2::first-line {
background-color: cornflowerblue;
color: indigo;
font-variant: small-caps;
}
::marker {
color: blue;
font-size: 30px;
}
.para4::selection {
background: indigo;
color: white;
}
</style>
</head>
<body>
<!--
Example Description
------- -----------
p::after Insert something after the content of each <p> element
p::before Insert something before the content of each <p> element
p::first-letter Selects the first letter of each <p> element
p::first-line Selects the first line of each <p> element
::marker Selects the markers of list items
p::selection Selects the portion of an element that is selected by a user.
-->
<h1>Demo: Pseudo Elements Selector</h1>
<h2>::first-letter & ::after</h2>
<p class="para1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem libero reiciendis veniam a dolorum qui laboriosam amet quam inventore nostrum.</p>
<hr>
<h2>::first-line</h2>
<p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis aut, obcaecati, asperiores repellendus non explicabo incidunt quas porro culpa corrupti rerum omnis repudiandae provident cum est veniam impedit. Culpa, consectetur quos voluptate ab assumenda ducimus dolor quisquam hic debitis. Facilis, earum eveniet velit rem reiciendis adipisci quibusdam dolor eum doloremque modi enim dicta repellendus deserunt aspernatur voluptatum labore libero consequuntur quasi amet quos sunt perferendis, consectetur suscipit? Quisquam aperiam modi voluptates suscipit! Debitis, laboriosam architecto consequatur tempora voluptatem esse iste porro ipsum, delectus earum libero enim aut laudantium error saepe! Sapiente assumenda a itaque aliquam, sunt sequi ducimus incidunt voluptate, natus culpa totam perspiciatis nemo deserunt cumque mollitia quaerat illum quis. Eos facere atque inventore consequatur nobis! Minus repudiandae rerum minima, magnam quasi vero non, earum veniam sint ut explicabo ducimus aut odit nobis sed est voluptatibus eligendi autem fugiat deleniti quo iure, pariatur ipsum? Alias veniam dolorum qui totam.</p>
<hr>
<h2>::marker</h2>
<p class="para3"> My favorite fruits:
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Cantaloupe</li>
</ol>
</p>
<hr>
<h2>::selection</h2>
<h3>NOTE: Select some text on this para </h3>
<p class="para4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis aut, obcaecati, asperiores repellendus non explicabo incidunt quas porro culpa corrupti rerum omnis repudiandae provident cum est veniam impedit. Culpa, consectetur quos voluptate ab assumenda ducimus dolor quisquam hic debitis. Facilis, earum eveniet velit rem reiciendis adipisci quibusdam dolor eum doloremque modi enim dicta repellendus deserunt aspernatur voluptatum labore libero consequuntur quasi amet quos sunt perferendis, consectetur suscipit? Quisquam aperiam modi voluptates suscipit! Debitis, laboriosam architecto consequatur tempora voluptatem esse iste porro ipsum, delectus earum libero enim aut laudantium error saepe! Sapiente assumenda a itaque aliquam, sunt sequi ducimus incidunt voluptate, natus culpa totam perspiciatis nemo deserunt cumque mollitia quaerat illum quis. Eos facere atque inventore consequatur nobis! Minus repudiandae rerum minima, magnam quasi vero non, earum veniam sint ut explicabo ducimus aut odit nobis sed est voluptatibus eligendi autem fugiat deleniti quo iure, pariatur ipsum? Alias veniam dolorum qui totam.</p>
<hr>
</body>
</html>