before和after的使用

java_zhaoyanli

于 2016-05-25 10:36:00 发布

阅读量1.3k

点赞数

分类专栏：响应式

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/51496501

版权

响应式专栏收录该内容

33 篇文章

订阅专栏

本文通过一个简单的例子展示了如何使用CSS的:before和:after伪元素来添加内容并设置样式。具体包括定义两个伪元素的内容、尺寸及背景颜色。

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

 <style type="text/css">
        p::before{
            content: "今天";
            width: 100px;
            height: 100px;
            display: block;
            background: red;
        }
        p::after{
            content:"星期日";
            width: 100px;
            height: 100px;
            background: red;
            display: block;
        }
    </style>
</head>
<body>
    <p>是</p>
</body>