Question

嗨，我是CSS和stackoverflow的新手，需要帮助。我正在尝试使用CSS创建类似的东西：

但是我真的没有得到这些结果，有人可以帮我吗？谢谢

Answer 1

我创建了一个片段，看起来像您要重新创建的图像。希望对您有所帮助。

.hr-sect {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  margin: 8px 0px;
}

.hr-sect::before,
.hr-sect::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 20px;
}

.hr-sect,
span {
  color: blue;
}

.hr-sect::before,
.hr-sect::after {
  background-color: blue;
}

hr {
  border: 1px solid blue;
}

.title {
  text-align: center;
}

.big {
  font-size: 25px;
}

<div class="title">
  <div class="hr-sect"><span>HOW TO GET</span></div>
  <span class="big">GALAXY SKIN FORTNITE</span>
  <hr>
</div>

CSS文本在边框和文本下的边框

1 个答案: