深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › css教程 › css伪对象before,after,content
返回列表 发新帖
查看: 302|回复: 0

css伪对象before,after,content

[复制链接]
马不停蹄

UID
13
贡献
74
金币
0
主题
24
在线时间
10 小时
注册时间
2023-6-26
最后登录
2023-7-5
发表于 2023-6-26 18:39:16 | 302 | 0 | 显示全部楼层 |阅读模式
马不停蹄 2023-6-26 18:39:16 302 0 显示全部楼层
css伪对象before,after,content

概念：就是给元素追加一个虚拟标签，由css加载，可以节省html的资源开销，必须有content属性，默认是行元素，可以进行转换。
::after:在指定的标签后面添加一个对象
::before:在指定的标签前面添加一个对象
content：元素里面的内容（内容中不能写标签）
代码如下：
  1. <style type="text/css">
  2.                 .box{width:200px;background:#f00;height:300px;}
  3.                 .box::before{
  4.                         content:'开头的内容';height:100px;
  5.                         line-height:100px;color:#fff;background:#00f;
  6.                 }
  7.                 .box::after{
  8.                         content:'这是一个段落';
  9.                         background-color:green;
  10.                         display:block;height:50px;
  11.                 }
  12.         </style>
  13. </head>
  14. <body>
  15.         <div class="box"></div>
  16. </body>
复制代码
css3特效, css教程, css样式
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表