html - 行和文本之间的更多空间

Question

我正在尝试做这样的事情：

      ---------------------        WORK         ------------------
                           ---------------------

这是我的代码

h2 { 
    width:100%;
    text-align:center;
    border-bottom: 1px solid #000;
    line-height:0.1em;
    margin:10px 0 20px; 
} 
h2 span { 
    background:#fff; 
    padding:0 10px;
}

<h2><span>THIS IS A TEST</span></h2>

我尝试了很多更改，但不能。请让我知道该怎么做？

标签： htmlcss

Answer 1

HTML 代码：

<div class='white-line'></div>
    <div  class='line-title text-center' >
    <span class='bg-black'>THIS IS A TEST</span>
</div>

CSS 代码：

.white-line{ height: 0; border-top: 1px;}
.bg-black{ background-color: #000000; }