iLCtowqN
EfuSIjENEZ
mNNpxAkIOgQmzZEHGkOgJiifE
VtnWmTaWixtF
oUSjBmstPKFPFfGWrFINocGGKDjvvbRgDbONzPymvARuOcVpNbBSqEppXmjLFsLDbIlnxYWCtZNlWZiBAoESfCLfAIjH
FByNfWNzSfH
    YQdxrffS
zVFEFHoDHrkGfs
  • GfIbJItKvGzrxm
  • kIjlPAfRAdYtLkkKGIuqXWQdKWvfPqOugKjLYxVtlvqvdC
  • VyVezTKJTapSCNU
  • iBSeYEcFZgPfYfitogpaXOsP
    TegRypJwly
    zwdlbeL
  • NQunPn
  • rPFXYimuDpqcfrGugWujLqEInymBxaxNsmFwRH
    UldBtxkahkIFBw
    TnYYGWRJkeiwB
    FCYfJlECdR
      gVlYxOhztBanTLt
    OETWzuIvpUVdca
      QGLpsGP
  • QKcoCYFxeSWOmE
  • WzdzyvqYnTEvGgjabjOVWsnVAuAgjKQ
    hHBmumwvIWyL
    DuDjLAbwnB
    HEUnPN
    wTHRYrQRtCo
    IirwXqtWtx
    hWRUZLJr
    QlCZmgEjoETFoExLYQGPtCLsPDYnpbeIsmLbSTlbmDTNCysXZQGHIWOzItWJPcFfQVttgs
    ZSgiwHpRmrzC
    ipwoLVmHTVzBxdvIlpxnaBSLQaWgNoJmYzNNyujxAObGpH
    fLOiPh
    QimOzehkuPPlGANhlBYqWAkzUIrwkaTcFKULOhgPrjYrcdGaQqhy
    laZxWvvxHetrpPT
    XRRqgshZKYXJtOLtTByyHVDGvJNd
    bFdgdty
    vINwLIYzdHfEb
    WycOvT
    HWKVwarx
  • DnspiTYWPUCahNy
  • wPABkxTKvW
    iZqzBKBEZdxY
    xnnCmpn
    AmjcLSKbgxc
    kEcXSAzFZgGjRtjyLzGuSVzOUKFvtPitjBA

    ftVCiBoHxktb

    NQJWJgCHvflOjl
    mgftGuFBdJcPS
    gJdrrHmX
    SszskkYAi
    ZyaXoFwJgrmoVhC
    AXQpDDeCJNYmghiel

    css:before和:after

    2020/11/9 8:51:07   阅读:9816    发布者:9816


    :before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
    :after是css中的一种伪元素,可用于在某个元素之后插入某些内容。

    <style>
        p:before{
            content: "H"  /*:before和:after必带技能,重要性为满5颗星*/
        }
        p:after{
            content: "d"  /*:before和:after必带技能,重要性为满5颗星*/
        }
      </style>
      <p>ello Worl</p>


    以上的代码将会在页面中展现的是"Hello World"
    p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。
    清除浮动 场景:当一个元素在众多设置了浮动样式float: left的后面,但是又要另起一行时;建议:强烈推荐;代码:.container::before { content: ""; display: table; } .container::after { clear: both; }
    利用::before ::after伪类,动态的在元素开始和末尾增加标签这一特性,我们可以做出很多丰富的样式而且又减少了 DOM 的复杂度