demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 伪元素:用CSS模拟出html标签的效果 (:before :after CSS2的写法 不推荐)
::before 在前面模拟子元素(默认是行内元素)
::after 在后面模拟子元素(默认是行内元素)
*/
span::before {
content: "今天"; /* content不能省 */
color: red;
}
span::after {
content: "真好";
background-color: yellow;
}
.weather {
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="weather">天气</span>
</body>
</html>