Question 11541 in Shopify Question posted in
The Shopify help center can be found here.

How to create this title style? – Shopify

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

Tags:

4

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
  3. 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;
}
    Login or Signup to reply.
  4. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search