CSS伪元素

最新推荐文章于 2022-11-28 21:30:01 发布

黑马程序员小张

最新推荐文章于 2022-11-28 21:30:01 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

文章标签： css html5

本文链接：https://blog.youkuaiyun.com/z000802/article/details/124112475

本文介绍了如何利用CSS伪元素:before和:after在网页中插入非主题内容，实现行内元素的美化和布局控制。通过实例演示了如何为父元素添加前后文本，展示了伪元素在网页设计中的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

能够使用伪元素在网页中创建内容

伪元素：一般页面中的非主题内容可以使用伪元素
区别：
1. 元素：HTML设置的标签
2. 伪元素：由CSS模拟出的标签效果
种类

伪元素作用
：：before 在父元素内容的最前添加一个伪元素
：：after 在父元素内容的最后添加一个伪元素
注意点：
1. 必须设置content属性才能生效
2. 伪元素默认是行内元素

伪元素	作用
：：before	在父元素内容的最前添加一个伪元素
：：after	在父元素内容的最后添加一个伪元素

装饰性的美化的一般都可以用伪元素来使用

<style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before {
            /* 内容 */
            /* content属性必须添加，否则伪元素不生效 */
            content: "月半";
            color: skyblue;
            width: 100px;
            height: 100px;
            background-color: green;

            /* 默认是行内元素，宽高不生效 */
            display: block;
        }

        .father::after {
            content: "夜曲"
        }
    </style>
</head>

<body>
    <!-- 伪元素 通过css创建标签，装饰性的不重要的小图 -->

    <!-- 找父级，在这个父级里面创建子级标签 -->

    <div class="father">小</div>


    <!-- 月半小夜曲 -->
</body>