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

最新推荐文章于 2024-05-30 14:16:57 发布

吴小花的博客

最新推荐文章于 2024-05-30 14:16:57 发布

阅读量573

点赞数 1

分类专栏： Web前端开发 Css3

Web前端开发同时被 2 个专栏收录

42 篇文章 6 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

Css3

16 篇文章 0 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

1.常见伪类和伪元素

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

:before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

2.举例

网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12545</p>

Note:这些特殊字符的html，js和css的写法是不同的，具体可查看https://www.cnblogs.com/starof/p/4718550.html

常用的：

® \00AE ； ℗\2117 ； | \007C ； / content: "/\00a0" ; ► \25BA ； ❤ \2764

★ \2605 ☎ \260E ； ✆ \2706； ♻ 267B ；☏ \260F ； ✉ \2709 ； $ \0024

¥ \00A5 \f0c9" \f002

3.content属性

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{
    content: "《";
    color: blue;
}
p::after{
    content: "》";
    color: blue;
}
</style>
<p>平凡的世界</p>

效果：《平凡的世界》

4.attr()

通过attr()调用当前元素的属性

比如将图片alt提示文字或者链接的href地址显示出来。

<style type="text/css">
a::after{
    content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>

参考

1.https://www.cnblogs.com/starof/p/4459991.html

吴小花的博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
::before和::after伪元素的用法

1.常见伪类和伪元素css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。:before和::after下特有的content，用于在css渲染中向元素逻辑上的...
复制链接

扫一扫