zoukankan      html  css  js  c++  java
  • 利用after和before伪元素在文字两边写横线

    示例:

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素after和before的用法</title>
        <style>
            .container{
                width: 1000px;
                margin: 10px auto;
                border: 1px solid red;
            }
            h3.title {
                color: #F2AE11;
                font-size: 1.3em;
                margin-bottom: 3em;
                text-align: center;
                font-weight: 500;
                line-height: 1.1;
            }
            h3.title span {
                display: block;     /*设置为块级元素会独占一行形成上下居中的效果*/
                font-size: 3em;
                color: #212121;
                position: relative;   /*定位横线(当横线的父元素)*/
            }
            h3.title span:before, h3.title span:after {
                content: '';                 /*CSS伪类用法*/
                position: absolute;         /*定位背景横线的位置*/
                top: 52%;
                background: #494949;       /*宽和高做出来的背景横线*/
                width: 9%;
                height: 2px;
            }
            h3.title span:before{
                left: 25%;        /*调整背景横线的左右距离*/
            }
            h3.title span:after {
                right: 25%;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <h3 class="title">I love you<span>Hello</span></h3>
    </div>
        </body>
    </html>

     我来分割线-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    新增渐变色,效果图类似下面

           h3.title span:before, h3.title span:after {
                content: '';                 /*CSS伪类用法*/
                position: absolute;         /*定位背景横线的位置*/
                top: 52%;
               /* background: #494949;       宽和高做出来的背景横线*/
                 9%;
                height: 2px;
            }
            h3.title span:before{
                left: 25%;        /*调整背景横线的左右距离*/
                background:linear-gradient(to left,#b6b6b6,#efefef);
            }
            h3.title span:after {
                right: 25%;
                background:linear-gradient(to left,#efefef,#b6b6b6);
            }    

    可以试一下以下的代码:是一个渐变的效果

    <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1px;"></div>
    
  • 相关阅读:
    CGAffineTransform的使用大概:
    CYLTabBarController的简单使用
    Masonry详解
    Swift学习 (四)
    《Advanced Bash-scripting Guide》学习(二):测试脚本调用的参数是否正确
    《Advanced Bash-scripting Guide》学习(一):对一个增强和广义的删除logfile的脚本的理解
    [JSOI2007]字符加密Cipher
    codevs 3160 最长公共子串
    codevs 1500 后缀排序
    浅谈后缀数组
  • 原文地址:https://www.cnblogs.com/wgl0126/p/7471685.html
Copyright © 2011-2022 走看看