CSS-偽元素選擇器
阿新 • • 發佈：2018-12-26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style>
li{
list-style: none;
}
li::before{
content: "*";
color: red;
}
li::after{
content: "$";
color: blue;
}
div::first-line{
color: red;
font-size: 20px;
}
div::first-letter{
color: gold;
font-size: 40px;
}
div::selection{
background-color: green;
font-size: 40px;
}
</style>
</head>
<body>
<ul>
<li>列表一</li>
<li>列表一</li>
<li>列表一列表一</li>
<li>列表一列表一列表一</li>
<li>列表一列表一列表一</li>
<li>列表一列表一列表一列表一</li>
<li>列表一列表一列表一列表一</li>
<li>列表一</li>
</ul>
<div>
He must be a person who is positive an
brave enough to make short term sacrifice
for long term success.
<br>
The future has arrived,it's commences now.
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style>
li{
list-style: none;
}
li::before{
content: "*";
color: red;
}
li::after{
content: "$";
color: blue;
}
div::first-line{
color: red;
font-size: 20px;
}
div::first-letter{
color: gold;
font-size: 40px;
}
div::selection{
background-color: green;
font-size: 40px;
}
</style>
</head>
<body>
<ul>
<li>列表一</li>
<li>列表一</li>
<li>列表一列表一</li>
<li>列表一列表一列表一</li>
<li>列表一列表一列表一</li>
<li>列表一列表一列表一列表一</li>
<li>列表一列表一列表一列表一</li>
<li>列表一</li>
</ul>
<div>
He must be a person who is positive an
brave enough to make short term sacrifice
for long term success.
<br>
The future has arrived,it's commences now.
</div>
</body>
</html>