想要使用CSS在所有内容之上创建文本

Question

这是我的html和CSS -

<style>
.bottom-border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  color: #999;
  margin-top: 0.1%;
  margin-bottom: 1.5%;
}
.subheading {
  position: relative;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
  clear: both;
  color: #666666;
  z-index: 1000;
}
h1 {
  text-align: center;
  margin-bottom: -0.4em;
}
</style>
<div class="bottom-border">
   <h1><span class="subheading" >Hello World</span></h1>
</div>

我希望我的文字看起来像 -

目前的结果是 -

我可以通过将背景颜色设置为span的白色来实现预期的效果，但我想知道其他方式，因为它不是理想的方式。

Answer 1

你可以这样做，不使用背景颜色。

＆＃13;

＆＃13;

.lines {
  line-height: 0.5;
  text-align: center;
}
.lines span {
  display: inline-block;
  position: relative;  
}
.lines span:before,
.lines span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid red;
  top: 0;
  width: 300px;
}
.lines span:before {
  right: 100%;
  margin-right: 15px;
}
.lines span:after {
  left: 100%;
  margin-left: 15px;
}

＆＃13;

<div class='lines'>
  <span>This is some super long text how about that</span>
</div>

＆＃13;

＆＃13;

＆＃13;

您需要更改两侧线条的宽度。

Answer 2

只需在span

中添加白色背景即可

＆＃13;

＆＃13;

.bottom-border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  color: #999;
  margin-top: 0.1%;
  margin-bottom: 1.5%;
}
.subheading {
  background-color: white;
  position: relative;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
  clear: both;
  color: #666666;
  z-index: 1000;
}
h1 {
  text-align: center;
  margin-bottom: -0.4em;
}

＆＃13;

<div class="bottom-border">
   <h1><span class="subheading" >Hello World</span></h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

更新/添加以下内容

.subheading {
    background:#fff;
    padding-left:5px;
    padding-right:5px;  /** You can change padding value**/
}

另一种方法是使用

h1 .subheading{
     background:#fff;  
     position:relative;   
}

h1:before{
    content="";
    width:50%;
    height:1px;
    background:#000;
    position:absolute;
    left:0;
    top:50%;
}


h1:after{
    content="";
    width:50%;
    height:1px;
    background:#000;
    position:absolute;
    right:0;
    top:50%;
    /** USE CSS to Create left line **/
}

Answer 4

我想你想要实现的是这样的

＆＃13;

＆＃13;

body {
  font-family: 'Cinzel Decorative', cursive;
  background: url(http://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
}
h1 {
  font-size: 3em;
  text-align: center;
}
.embiggen {
  font-size: 4em;
  text-shadow: 0 0 40px #ffbab3;
}
.subtitle {
  margin: 0 0 2em 0;
}
.fancy {
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 600px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

＆＃13;

  <h1>Main Title</h1>
  <p class="subtitle fancy"><span>A fancy subtitle</span></p>

＆＃13;

＆＃13;

＆＃13;