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

番茄西红柿发布于2019-04-23 13:29 / 2041人阅读

摘要：下面是伪元素和伪元素的具体用法和使用规则作用在标签前后添加字符串使用规则后面一定要用把要添加的内容括起来，否则是无法显示的括号不一定需要添加。

场景：

假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在每个电话号码前都添加一个标签？这要整到猴年马月？搞不好还会出现标签浮动的问题。

这个时候::after伪元素和::before伪元素就是救星了，在css中有这么两个伪类，允许通添加伪元素在html元素前/后添加内容。

这里我简单写了一个demo

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<style>
.phone-number{
    font-size: 14px;
    font-weight: 600;}

.phone-number::before{
    content: 260E;
    font-size: 22px;
    color: red;
}
style>
head>

<body>
    <div class=phone-number> 13300000000div>
    <div class=phone-number> 13300000001div>
    <div class=phone-number> 13300000002div>
    <div class=phone-number> 13300000003div>
    <div class=phone-number> 13300000004div>
body>
html>

实现的效果如下

每一个号码都有一个class属性，我只需要对这个class属性写一次css渲染层和添增上

:: before伪元素就可以实现这个功能了。显然这比一个个添加标签要轻松得多。

可能有人会问，这个的符号是怎么来的？html官方规定了一些特殊符号的unicode码，具体可以看http://www.cnblogs.com/starof/p/4718550.html。

下面是:: before伪元素和:: after伪元素的具体用法和使用规则

（1）content:’()’

作用：在标签前/后添加字符串

使用规则：content后面一定要用‘’把要添加的内容括起来，否则是无法显示的（括号不一定需要添加）。

例如：

在

￥80元

之后添加如下css装饰代码：

p::after{
         content:门市价100元;
         font-size: 14px;
         text-decoration: line-through;
         color: grey;
}

（2）content:url(‘图片地址’)

作用：在标签前/后添加图片（图片通过网络url实时加载）

使用规则：必须用url()引入需要添加的图片，道理跟background的设置一样。图片的地址也需要用‘’括起来。

例如：

在

10086

添加css装饰代码

a::before{
    content:url(http://www.10086.cn/images/index/logo.png);
}

（3）清除浮动

::after{

content : ’’ ;

display:block;

}

用法是设置content的为空字符串

关于清除浮动的一些可用方法有很多种，我在这里就不展开来说了。

用人可能会说，用法（1）在p标签后面添加内容，直接在html代码里面的p标签后面再增加一个p标签不就行了吗？为什么还要用这种方法呢？

可以思考一下，通过在后面添加一个p标签，同时也需要用css代码去装饰这个新添加上去的标签。显然，代码量上，后者比前者多了，而且后者在html中新增了一个DOM节点，如果数量很多时，解析器在解析时难免会增加一定的时间。而前者没有这种问题，而且还能更好实现表现层和样式层的分离式开发。

最后值得知道的是，使用::before和::after伪元素这种添加内容的方式，只是在css渲染页面的时候添加上去的，在DOM节点上是查不到这些添加上去的内容的。所以，一般不要添加实际的内容。意味着除了文本内容和图片/icon之外的html标签是无法添加进去的。

专线服务 idc机房托管伪元素获取伪元素分别建立包含10个数据元素的顺序线性表和链式线性表 before

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1957.html

详解 CSS 属性 - :before && :after

摘要：现在我们经常在源码中看到如下的写法这里的和就是我们今天来探讨的伪元素之二。举例说明在这里我们给伪元素添加了属性，并赋值为。这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为是无效的。现在我们经常在 html 源码中看到如下的写法： showImg(http://segmentfault.com/img/bVb9y2); 这里的 ::after 和 ::before 就是...

plokmju88 2019-08-28 17:51 评论0 收藏0
详解 CSS 属性 - :before && :after

摘要：现在我们经常在源码中看到如下的写法这里的和就是我们今天来探讨的伪元素之二。举例说明在这里我们给伪元素添加了属性，并赋值为。这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为是无效的。现在我们经常在 html 源码中看到如下的写法： showImg(http://segmentfault.com/img/bVb9y2); 这里的 ::after 和 ::before 就是...

CoderBear 2019-08-01 14:36 评论0 收藏0
CSS按钮体验提升技巧之:before/:after与自定义data-*的妙用

摘要：其实网上已经有很多各类效果的了，例如神人太多了，我也找到了一种比较好的按钮制作方法，体验不错，演示动画截图如下一种不错的增进体验的效果噢具体代码实现搓这里，其实网上已经有很多各类效果的了，例如: http://tympanus.net/Developme... 神人太多了，我也找到了一种比较好的按钮制作方法，体验不错，演示动画截图如下： showImg(https://segment...

widuu 2019-08-29 11:05 评论0 收藏0
css伪元素（before与after）

摘要：最近因为一些网页的需要，比较深入的使用了的伪元素，发现原来不只是用用或而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。最近因为一些网页的需要，比较深入的使用了CSS的伪元素（Pseudo Element），发现原来不只是用用before或after而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。什么是伪元素？伪元素之所以称...

shevy 2019-08-05 16:45 评论0 收藏0
css伪元素（before与after）

摘要：最近因为一些网页的需要，比较深入的使用了的伪元素，发现原来不只是用用或而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。最近因为一些网页的需要，比较深入的使用了CSS的伪元素（Pseudo Element），发现原来不只是用用before或after而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。什么是伪元素？伪元素之所以称...

mo0n1andin 2019-08-29 18:38 评论0 收藏0