你所不知道的伪元素 CSS 中::before 和 ::after 的用法

最新推荐文章于 2024-05-28 07:58:52 发布

webxiaoma

最新推荐文章于 2024-05-28 07:58:52 发布

阅读量2.7k

点赞数 3

分类专栏： HTML5/CSS3 文章标签： css 伪元素伪类

本文链接：https://blog.csdn.net/webxiaoma/article/details/53762504

版权

HTML5/CSS3 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

以前知道伪类和为元素，但是没有真正去研究过，今天我主要总结了一下伪元素中的::before 和 ::after 的一些用法，通过这两个为元素来认识一下其他的为元素！

一、什么是伪类，什么是为元素

① 伪类

伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来，":lang"在一些情况下也在从文档树中推断出来

伪类有： :first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first

② 伪元素

伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）。

伪类有： :first-line，:first-letter，:before，:after

css3中为了区分伪类和为元素，经常在伪类前加双冒号（例如：::before 与 :before无差别）

二、伪元素 ::before 和 ::after

1.最基本效果

HTML：

<a href="">看我的效果</a>

css：

a::before{
        content:"#";
     }
     a::after{
       content:"@";
     }

结果：

2. 清除浮动

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
    <style>
     .clear-fix {zoom: 1;}  
     .clear-fix:after{ display:table; content: ""; width: 0; clear: both; }  
    </style>
    </head>
    <body>
       <div class="clear-fix">
          <p class="pa">浮动元素</p>
       </div>
    </body>
    </html>

3. 配合CSS3 产生特效

看过一个创意特效网站这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是这两个伪元素了

例如这种效果：

除了简单的添加字符，配合 CSS 强大的定位和特效特性，完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是，如果不需要内容仅配合样式属性做出效果，内容属性也不能为空，即 content:”" 。否则，其他的样式属性一概不会生效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    a {  
        position: relative;
        left:20px;
        top:20px;  
        display: inline-block;  
        outline: none;  
        text-decoration: none;  
        color: #000;  
        font-size: 32px;  
        padding: 5px 10px;
        
      }
    a::before{content: "";position:absolute;left:10px;transition:0.3s  linear all;}
    a::after{content: "";position:absolute;right:10px;transition:0.3s  linear all;} 
    a:hover::before, a:hover::after { position: absolute; color:red;font-weight:bolder;} 
 
    a:hover::before { content: "\5B"; left: -15px; }  
    a:hover::after { content: "\5D"; right:  -15px;}   
  </style>
</head>
<body>
   <a href="">看我的效果1</a>
   <a href="">看我的效果2</a>
   <a href="">看我的效果3</a>
</body>
</html>

好了，我总结的为元素就这么多，文章以后可以能会有些改动，也欢迎读者多加指点。

webxiaoma

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
你所不知道的伪元素 CSS 中::before 和 ::after 的用法

以前知道伪类和为元素，但是没有真正去研究过，今天我主要总结了一下为元素中的before 和 after 的一些用法，通过这两个为元素来认识一下其他的为元素！一、什么是伪类，什么是为元素 ① 伪类伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。在感觉上
复制链接

扫一扫