zoukankan      html  css  js  c++  java
  • #学习记录#——CSS content 属性

    CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面。

    1. 添加文本内容 

    html:

    <h1>给末尾添加内容。 </h1>
    <h2>给末尾不添加内容。 </h2>
    

    css:

    <style>
    h1::after{
              content: " hello world!!"
    }
    h2::after{
              content: none
    }
    </style>
    

    所要添加的内容用双引号引起来,若不添加内容可使用 属性none

    2. 在元素前/后添加图片,url里是图片的路径

    CSS:

    <style>
    h1:: before{
    content:url("images/a.jpg");
    } </style>

    不过插入的图片不能修改大小

    3. 给元素添加属性值,直接利用attr获取元素的属性,将其插入到对应位置。

    <style>
    a:: after{
                 content:attr(href)
                }
    </style>
    
    <body>
        <a href="http://www.cnblogs.com/olive987/">我的博客</a>
    <body>
    
  • 相关阅读:
    4.23上机练习
    4.17java作业
    4.16java作业
    leetcode 189
    leetcode 172
    leetcode 171
    leetcode 169
    win10内网外网智能访问
    leetcode 168
    leetcode 165
  • 原文地址:https://www.cnblogs.com/olive987/p/5797198.html
Copyright © 2011-2022 走看看