• css中伪类元素:before和:after


        关于伪类元素:before和:after

    1、:before和:after简例介绍

      :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <style>
    #pid:before {
    content: "^^";
    color: red;
    }
    #pid:after {
    content: "!";
    color: red;
    }
    </style>
    </head>
    <body>
    <p id="pid">welcome to my home</p>
    </body>
    </html>

    这段代码会在#pid元素内容之前插入一个'^^',以及在内容之后添加一个'!',插入的行内元素是作为#pid的子元素,效果如下:

    如果没有content属性,伪类元素将没有任何作用。

    但是可以指定content为空,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作

    除了插入文字内容之外,还可以插入图片等。

    2、:before和:after惊人用法

    在这里展示一个常用的场景,很多人写过如下清除浮动的代码:

    <div id="container">
    <div class="content-left">this is left content.</div>
    <div class="content-right">this is right content.</div>
    <div class="clear"></div>
    </div>

    对应的css代码如下:
    .content-left{
    float: left;
    150px;
    font-weight:bold;">red;
    }
    .content-right{
    float: right;
    450px;
    font-weight:bold;">yellow;
    }
    .clear{
    clear: both;
    }

    为了清除上面的浮动,多添加了一个<div>元素,并给此<div>元素添加了clear样式,这种做法破坏了HTML5的语义化原则,因此应对css样式进行修改,添加如下代码:
     .clearfix{
    zoom: 1;
    }
    .clearfix:before,
    .clearfix:after{
    display: table;
    content: "";
    }
    .clearfix:after{
    clear: both;
    }
    只要在父容器上应用clearfix这个类即可实现清除浮动。。。



  • 相关阅读:
    401. Binary Watch
    46. Permutations
    61. Rotate List
    142. Linked List Cycle II
    86. Partition List
    234. Palindrome Linked List
    19. Remove Nth Node From End of List
    141. Linked List Cycle
    524. Longest Word in Dictionary through Deleting
    android ListView详解
  • 原文地址:https://www.cnblogs.com/smswei/p/5223496.html
Copyright © 2020-2023  润新知