zoukankan      html  css  js  c++  java
  • css---6伪元素选择器

    after                   :在内容后边

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>after</title>
    <style type="text/css">
    div {
         300px;
        height: 100px;
        border: 1px solid #000;
    }
    div::after {
        content: "我在内容的后面";
    }
    </style>
    </head>
    <body>
    <div>伪元素fgdddddddddddddddddddddddddddddd</div>
    </body>
    </html>
    content after

    before                在内容的前面

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>before</title>
    <style type="text/css">
    div {
         300px;
        height: 100px;
        border: 1px solid #000;
    }
    div::before {
        content: "我在内容的前面";
    }
    </style>
    </head>
    <body>
    <div>伪元素</div>
    </body>
    </html>
    content before

    First-Lette           第一个字母

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>First-Letter</title>
    <style type="text/css">
    div {
         500px;
        margin: 0 auto;
        font-size: 12px;
    }
    div::first-letter {
        color: #f00;
        font-size: 24px;
        font-weight: bold;
    }
    </style>
    </head>
    <body>
        <div>sssss</div>
    </body>
    </html>
    View Code

    First-Line          全部一行

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>First-Line</title>
    <style type="text/css">
    div {
         500px;
        margin: 0 auto;
    }
    div::first-line {
        color: #f00;
        font-weight: bold;
    }
    </style>
    </head>
    <body>
    <div>
        sssss<br>
        sssss<br>
        sssss<br>
    </div>
    </body>
    </html>
    first Line

    ::selection        选择颜色会变

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Selection</title>
    <style type="text/css">
    div::selection {
        background: red;
        color: pink;
    }
    </style>
    </head>
    <body>
    <div>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
    </body>
    </html>
    View Code
  • 相关阅读:
    自定义view的一些问题
    爬取基金持有股票并存进数据库
    python读取配置文件
    Linux防火墙
    解决vue微信浏览器H5页面ajax请求后无法播放问题
    解决微信浏览器页面超出一块儿问题
    iOS Safari浏览器上iframe overflow: scroll元素无法滑动bug解决方法整理
    vue html2canvas 实现截图功能
    解决html2canvas截图生成的图片偏移不完整
    使用Hilo做H5接金币接红包小游戏
  • 原文地址:https://www.cnblogs.com/hack-ing/p/11764234.html
Copyright © 2011-2022 走看看