内部带有文本 block 的 HTML 换行符

Question

我在 HTML、CSS 等方面还很陌生，但我一直在做一个小元素。

我想要在两个文本容器之间有一个“分隔符”。我找到了类似的东西，但它不适合我。我一直在寻找这样的东西:

Text 1
---[box]Instruction---
Text 2

我确实找到了一个示例，但我无法复制它。我精通代码，但就是不明白。

这是我从中得到灵感的页面:HTML Basics | Codeacademy

Answer 1

有很多方法可以到达那里，这将是其中之一的开始:

.breaker {
  text-align: center;
  border-top: 1px solid teal;
  margin-bottom: 15px;
  margin-top: 15px;
}
.breaker span {
  background-color: white;
  border: 1px solid teal;
  display: inline-block;
  padding: 3px 5px;
  transform: translateY(-50%);
}

Some text above the breaker...
<div class="breaker"><span>Breaker text</span></div>
...and some below.