Question

我在文本的两边都添加了一行，文本在中间，右边的行之后是右边的一个按钮，该行与按钮重叠，在这里我想要后面的行触摸按钮的边框，使其完美融合。我每天大部分时间都尝试过，每次尝试编辑CSS时都尝试过。似乎是移动文本或左行，还是事件使行变小。

这是我的HTML代码：

<div class="main">
<h1>Latest News</h1>
<button><a href="#">More</a></button>
</div>

这是我的CSS：

.main h1 {
overflow: hidden;
text-align: center;
}
.main h1:before,
.main h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.main h1:before {
right: 0.5em;
margin-left: -50%;
}
.main h1:after {
left: 0.5em;
margin-right: -50%;
}
.main button {
float: right;
width: 100px;
background-color: #fff;
border: 1px solid #000;
margin-top: -50px;
}
.main a {
font-size: 20px;
color: #000;
text-decoration: none;
}

Line before and after text with button on the right

任何帮助将不胜感激，并提前致谢。

Answer 1

最简单的嵌入式解决方案是为z-index伪元素指定一个否定的h1::after：

.main h1:after {
  left: 0.5em;
  margin-right: -50%;
  z-index: -1;
}

.main h1 {
  overflow: hidden;
  text-align: center;
}

.main h1:before,
.main h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.main h1:before {
  right: 0.5em;
  margin-left: -50%;
}

.main h1:after {
  left: 0.5em;
  margin-right: -50%;
  z-index: -1;
}

.main button {
  float: right;
  width: 100px;
  background-color: #fff;
  border: 1px solid #000;
  margin-top: -50px;
}

.main a {
  font-size: 20px;
  color: #000;
  text-decoration: none;
}

<div class="main">
  <h1>Latest News</h1>
  <button><a href="#">More</a></button>
</div>

JS Fiddle demo。

参考文献：

z-index。

文本前后的行，中间有文本，右边有按钮

1 个答案: