Lines between a text/divider

Question

I'm playing with flexbox and I found this on codepen, and I was wondering, how can I put this vertically? I tried to change the border to top and bottom, but it disappeared.

HTML:

<div>
  <h1>Hello World!</h1>
</div>

CSS:

h1 {
  color: #444;
  font-family: sans-serif;
  font-size: 2.625em;
  text-align: center;
  padding: 5rem 0;
  display: flex;
  justify-content: center;
  width: 100%;
}
h1::before, h1::after {
  align-self: center;
  background: #999;
  background-clip: content-box;
  box-sizing: border-box;
  content: " ";
  flex-grow: 1;
  height: 0.2em;
}
h1::before {
  border-right: 1.5625em solid transparent;
}
h1::after {
  border-left: 1.5625em solid transparent;
}

The example here

Same layout without flexbox : [Line before and after centered text over transparent background](http://stackoverflow.com/questions/23584120/line-before-and-after-centered-text-over-transparent-background) — web-tiki, Jun 03 '15 at 15:11
It's not duplicated, I want to put it vertically, not horizontally and using flexbox. — yayuj, Jun 03 '15 at 15:23
I understand this isn't a duplicate but I'm having hard time understanding what you are trying to do here, what does "how can I put this vertically?" mean? — web-tiki, Jun 03 '15 at 15:51
The lines that divides, it has a "hello world" between them, I want to put the lines in a vertical position. — yayuj, Jun 03 '15 at 15:52
I still don't understand do you mean something like this http://jsfiddle.net/6bm2a98u/? — web-tiki, Jun 03 '15 at 15:57
@yayuj why don't you post a screenshot of the desire output? — Stickers, Jun 03 '15 at 16:09

jbutler483 · Accepted Answer · 2015-06-03T16:21:48.993

Although this question contains a little bit of ambiguity, I'm going to hopefully 'guess' exactly your intentions.

You may be looking to create a 'vertical split' of the text, something like:

  ||
 TEXT  
  ||

Which can be done with some pseudo elements:

h1 {
  text-align: center;
  font-size: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  word-spacing: -4px;
}
h1:before,
h1:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  border-lefT: 5px solid black;
  border-right: 5px solid black;
  left: 50%;
  transform: translateX(-50%);
}
h1:before {
  bottom: 0;
}
h1:after {
  top: 0;
}

<h1>SOME TEXT</h1>

However, if you were looking to create the lines either side of your text, like:

|      |
| TEXT |
|      |

you could use borders, setting your h1 element to display:inline-block

body {
  text-align: center;
}
h1 {
  text-align: center;
  display: inline-block;
  padding: 20px;
  border-left: 5px solid black;
  border-right: 5px solid black;
}

<h1>SOME TEXT</h1>

Yes, that is it. Thank you very much. – yayuj Jun 03 '15 at 17:21 — yayuj, Jun 03 '15 at 17:21

Lines between a text/divider

1 Answers1