您的位置：首页 > 其它

常见伪元素::before和::after的用法

2020-04-20 19:33 447 查看

常见伪元素

  • ::first-letter
  • ::first-line
  • ::before
  • ::after
  • ::selection

::before和::after必须配合content属性来使用，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

  1. content属性

content用来定义插入的内容，content必须有值，至少是空

常见的用法：

<style type="text/css">
p::before{
content: "《";
}
p::after{
content: "》";
}
</style>
<p>哈利波特</p>
<style>
a::before{
content: url("https://www.xiaoyuer.com/img/mobile_phone.png");
}
</style>
---------------------------
<body>
<a href="http://www.baidu.com">手机号</a>
</body>
  1. 清除浮动

清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动

.cf:before,
.cf:after {
content: " ";
display:block;
}
.cf:after {
clear: both;
}
  • 点赞 1
  • 收藏
  • 分享
  • 文章举报
xiaoyuer游啊游 发布了11 篇原创文章 · 获赞 8 · 访问量 694 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航