-2

looking to create a title style where the text breaks in-between the line, not sure if this would be considered a border or what. Any ideas?

Haven't tried anything yet - have been playing around but can't figure it out

rid
  • 61,078
  • 31
  • 152
  • 193
Sam
  • 1
  • 1
  • Things are, there are plenty of ways to do that. All those ways would depend of your HTML structure/skeleton: with css grid, without... regular H1 or H2 in a standard div... and so on! Could you elaborate and put some code? – pier farrugia Dec 03 '22 at 16:32

4 Answers4

0

I have come up with one valid for different text widths and any possible background without adding extra markup. Also, I tried matching the image by adding a few extra stylings and font colors.

h1 {
  overflow: hidden;
  text-align: center;
  color: #9cb69c;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 2.5px;
}

h1:before,
h1:after {
  background-color: #9cb69c;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 1.5em;
  margin-left: -50%;
}

h1:after {
  left: 1.5em;
  margin-right: -50%;
}
<h1>STAY INSPIRED</h1>
Santheep Madhavan
  • 301
  • 1
  • 5
0

Another way of solving it, using flex, padding and linear-gradient.

body {
  --background-color: #fcfbfa;
  
  background-color: var(--background-color);
}

h2.decorated {
  color: #9ba592;
  display: flex;
  justify-content: center;
  background: linear-gradient(to bottom, transparent calc(50% - 1px), currentcolor 50%, transparent calc(50% + 1px));
}

h2.decorated > div {
  padding: 1rem 2rem;
  background-color: var(--background-color);

  font-family: sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
<h2 class="decorated"><div>Stay Inspired</div></h2>
Rickard Elimää
  • 7,107
  • 3
  • 14
  • 30
0

HTML supports for adding lines with ::before and ::after CSS Selectors. The ::before selector inserts content before a selected element. ::after inserts content after a specified element. These pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML.

Ex:

HTML

<h2 class="hr-lines"> Stay Inspired</h2>

CSS

.hr-lines{
  position: relative;
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}

.hr-lines:before, .hr-lines:after{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
}
pr96
  • 994
  • 5
  • 17
0

I hope this solution attached can help you.

.container{
   display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.divider{
 border-top:1px solid gray;
 width: 45%;
  margin: 10px 
<div class="container">
  <div class="divider"></div>
  <h3>Hello</h3>
   <div class="divider"></div>
</div>
Yebrai
  • 1
  • 3