CSS before和after选择器

最新推荐文章于 2024-07-11 21:11:19 发布

'"<>{{7*7}}

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量312

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/weixin_43415644/article/details/106615836

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯CSS3单选框复选框美化样式代码</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <style>
        h3:before{
            content:'XDU:';
            background:#eeeeee;
            color:#d9534f;
        }
        h4:after{
            content:':HCU';
        }
        h5:before{
            content:url(img/1234.jpg);
        }
    </style>
</head>
<body>
    <div class="container">
            <div class="page-header">
                <div class="page-title">
                    <h1>CSS的before和after选择器</h1>
                </div>
            </div>
            <h3>Hello DataBank</h3>
            <h3>Hello DataBank2</h3>
            <h4>Hello DataBank3</h4>
            <h4>Hello DataBank4</h4>
            <h5>Hello DataBank5</h5>
            <h5>Hello DataBank4</h5>
    </div>
</body>
</html>