时间戳

首页 > 解决方案 > 水平线中间有单词时如何去除背景白色

html - 水平线中间有单词时如何去除背景白色

问题描述

请告诉我如何删除背景白色并用css在中间用文字处理水平线。

这是我的代码，请检查。

.asses {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #b7d9eb;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

.asses span {
    background: #fff;
    padding: 0 10px;
    font-size: 43px;
    font-family: 'lato';
    color: #555555;
}
<h2 class="asses">
    <span>My TEXT HERE</span>
</h2>

所以现在请告诉我如何解决这个问题

标签： htmlcss

解决方案

尝试这个

h2 {
  font: 33px sans-serif;
  margin-top: 30px;
  text-align: center;
  text-transform: uppercase;
}


h2.asses {
  position: relative;
  overflow: hidden;
}

h2.asses span {
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  position: relative;
  padding: 0 20px;
}

h2.asses span:before,
h2.asses span:after {
  content: '';
  display: block;
  width: 1000px;
  position: absolute;
  top: 0.73em;
  border-top: 1px solid red;
}

h2.asses span:before {
  right: 100%;
}

h2.asses span:after {
  left: 100%;
}
<h2 class="asses"><span>My TEXT HERE</span></h2>

有关更多示例，请参阅此链接Line behind text

推荐阅读