css布局实现文字在线条上或中间效果代码-html代码-BFW代码库

css布局实现文字在线条上或中间效果代码

代码语言：html

代码描述：css布局实现文字在线条上或中间效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">



    <style>
        body{
            background: white;
        }
                h2 {
                  font: 33px sans-serif;
                  margin-top: 30px;
                  text-align: center;
                  text-transform: uppercase;
                }
                h2.background {
                  position: relative;
                  z-index: 1;
                }
                h2.background:before {
                  border-top: 2px solid #dfdfdf;
                  content: "";
                  margin: 0 auto;
                  /* this centers the line to the full width specified */
                  position: absolute;
                  /* positioning must be absolute here, and relative positioning must be applied to the parent */
                  top: 50%;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  width: 95%;
                  z-index: -1;
                }
                h2.background span {
                  /* to hide the lines from behind the text, you have to set the background color the same as the container */
                  background: #fff;
                  padding: 0 15px;
                }
                h2.double:before {
                  /* this is just to undo the :before styling from above */
                  border-top: none;
                }
                h2.double:after {
                  border-bottom: 1px solid blue;
                  -webkit-box-shadow: 0 1px 0 0 red;
                  -moz-box-shadow: 0 1px 0 0 red;
                  box-shadow: 0 1px 0 0 red;
                  content: "";
                  margin: 0 auto;
                  /* this centers the line to the full width specified */
                  position: absolute;
                  top: 45%;
                  left: 0;
                  right: 0;
                  width: 95%;
                  z-index: -1;
                }
                h2.no-background {
                  position: relative;
                  overflow: hidden;
                }
                h2.no-background span {
                  display: inline-block;
                  vertical-align: baseline;
                  zoom: 1;
                  *display: inline;
                  *vertical-align: auto;
                  position: relative;
                  padding: 0 20px;
          .........完整代码请登录后点击上方下载按钮下载查看