Interesting Name Interesting Name - 9 days ago 6
CSS Question

HTML line breaker with a text block inside

I'm pretty new in HTML, CSS etc. but I've been working on a little project.

I want a line "breaker" between two text containers. I've found stuff like that but it doesn't suit me. I've been looking for something like this:

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


I did found an example, but I just can't replicate it. I've peaked in the code, but I just dont get it.

http://prntscr.com/dbcd8f

Here is the page I got the idea from: HTML Basics | Codeacademy

Answer

There's many ways to get there, this would be the start of one of them:

.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.

Comments