<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style>
/* 创建一个伪元素，该元素代表所选HTML元素的最后一个子元素。它用于与CSS content属性协作将样式添加到此特定元素 除Safari和Opera外*/
.one::after {
content: '-1';
color: blue;
}
.two::after {
content: '-2';
color: red;
}
/* 创建一个伪元素，该元素代表所选HTML元素的第一个子元素。默认情况下，它是内联的，用于与CSS content属性协作将样式添加到此特定元素 除Safari，Internet Explorer 9和Opera外*/
.one::before {
content: '1-';
color: blue;
}
.two::before {
content: '2-';
color: red;
}
/* 创建一个伪元素，表示一个块元素第一行的第一个字母，只要它不在图像或表格之后。 除了iOS设备上的Safari以外*/
p::first-letter {
color: red;
font-size: 130%;
}
p {
font-size: 130%;
}
/* 创建一个伪元素，该伪元素代表block元素的第一行。就像第一个字母一样，第一行也取决于一些因素 */
p::first-line {
color: red;
font-size: 130%;
}
/* 伪元素选择列表项的标记框，该列表框通常包含项目符号或数字。它用于列表项和摘要元素（多用于ui li列表）仅受Firefox支持 */
li::marker {
font-size: 200%;
color: #00b7a8;
font-family: "Comic Sans MS", cursive, sans-serif;
}
/* 伪元素指向演示文稿中输入元素的占位符，通常在表单中找到。默认情况下，大多数浏览器会将浅灰色应用于占位符 除IE*/
input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}
/* 伪元素适用于DOM上突出显示的元素（鼠标选择状态下） */
p::selection {
background-color: red;
}
</style>
</head>
<body>
<p class="one">
This is my very first paragraph.
This is my very first paragraph.
This is my very first paragraph.
This is my very first paragraph.</p>
<p class="three">This is my second paragraph.</p>
<p class="two">This is my last but not the least paragraph</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<input placeholder="Type something here!">
</body>
</html>
