【代码笔记】Web-CSS-CSS伪元素

一，效果图。

 

二，代码。

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS 伪元素</title>
    <style>
    p:first-line {
        color: #ff0000;
        font-variant: small-caps;
    }
    
    p:first-letter {
        color: #ff0000;
        font-size: xx-large;
    }
    
    h1:before {
        content: url(smiley.gif);
    }
    
    h1:after {
        content: url(smiley.gif);
    }
    </style>
</head>

<body>
    <h1>This is a heading</h1>
    <p>第一行</p>
    <p>第二行</p>
</body>

</html>

 

参考资料：《菜鸟教程》

 

posted @ 2020-09-16 09:00  花儿迎风笑  阅读(311)  评论(0)  编辑  收藏  举报