Divider heading

by Csaba Hellinger

HTML

<h1>Subscriptions</h1>
<div>Items...</div>
<h1>Consumables</h1>
<div>Items...</div>
<h1>Entitlements</h1>
<div>Items...</div>
<h1>How this will wrap when it is very long</h1>
<div>Not great, but this is the best I could do in a single component...</div>

CSS

h1 {
  display: flex;
  align-items: center;
  text-wrap-style: balance;
  text-align: center;
  
  &::before,
  &::after {
    content:'';
    flex: 0 1 50%;
    height: 0.1rem;
    background: currentColor;        
  }
  
  &::before {
    margin-inline-end: 1rem;
  }
  
  &::after {
    margin-inline-start: 1rem;
  }  
}

/* just for the demo */
html {
  background: #222;
}
body {
  background: #333;
  color: #ddd;
  font-size: 13px;
  font-family: sans-serif;
  margin: 1rem;
}