浅谈css伪元素:after和:before

::after和::before的使用很简单,可以认为其所在元素上存在一前一后的两个的元素,这两个元素默认是内联元素,但我们可以为其增添样式。::after和::before使用的时候一定要注意,必须设置content,否则这两个伪元素是无法显示出来的。而content属性,会作为这两个伪元素的内容嵌入他们中。如:

<style>
    p:before{
        content: "H";
    p:after{
        content: "d";
    }
  </style>
  <p>ello Worl</p>

展示为:Hello world

分享一些::after和::before使用的经验:

1.间隔符用法

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
    li:not(:last-child)::after{
        content: "|";
    }
</style>
<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

展示:

2.做border三角图标

<!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>Document</title>
    <style>
        p {
            width: 200px;
            height: 50px;
            line-height: 50px;
            background: red;
        }

        p::before {
            display: inline-block;
            border: 5px solid transparent;
            border-right-color: red;
            content: "";
            position: relative;
            left: -10px;
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

3.字符图标

<!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>Document</title>
    <style>
        .search {
            position: relative;
        }

        .search::before {
            content: "☌";
            transform: rotate(180deg);
            float: left;
            font-size: 25px;
            position: absolute;
            line-height: 30px;
            left: 5px;
        }

        .search input {
            display: block;
            padding-left: 25px;
            height: 30px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="search">
        <input type="text" name="" id="" placeholder="请输入!! ">
    </div>
</body>

</html>

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 99.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值