英文翻译：
!DOCTYPE html：文档类型html
html：超文本标记
head：头部
meta：元信息
charset：字符集
title：标题
body：文档主体
color：颜色

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* div::first-letter{
                color: red;
            } */
            /* div::first-line{
                color: red;
            } */
            div::before{
                content: 'www.hrkkid.com'; /* 无法选中 */
            }
            div::after{
                content: 'www.hrkkid.com'; /* 无法选中 */
                color: red;
                font-size: 12px;
                display: block; /* 本来行级元素，现在转换成块级元素 */
            }
        </style>
    </head>
    <body>
        <!-- 伪元素：文档结构中没有出现的元素，比如“我要自学”第一格字“我” -->
        <!-- 伪元素使用“::”双冒号 -->
        <!-- ::first-letter：选择元素中第一格字 -->
        <!-- ::first-line：选择元素中第一行。根据浏览器窗口变化而变化 -->
        <!-- ::before：在元素内容之前添加新内容，必须配合content使用 -->
        <!-- ::after：在元素内容之后添加新内容，必须配合content使用 -->
        <!-- 可以把伪元素当成元素使用 -->
        <div>
            我要自学我要自学我要自学我要自学我要自学我要自学我要自学我要自学
            我要自学我要自学我要自学我要自学我要自学我要自学我要自学我要自学
        </div>
    </body>
</html>
打开支付宝首页搜“559920739”领红包，领到大红包的小伙伴赶紧使用哦！ （如果你觉得本文不错，请扫描下面二维码随意打赏哦）
最后修改：2020 年 10 月 30 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏