To achieve this, you have the option to utilize either Flexbox or CSS Grid. This approach offers more versatility compared to simply placing a colored box behind the text.
Below is the HTML code snippet:
<h2>Title</h2>
<h2>Title number two</h2>
<h2>Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</h2>
/* Sample CSS */
body {
background: linear-gradient(#A0BAF7, #4CACC1);
min-height: 100vh;
}
h2 {
margin: 30px 0;
font: 700 2em/1.4 'Avenir', sans-serif;
color: #FFF;
}
Here is the Flexbox solution: https://codepen.io/trys/pen/vjRXLW/
h2 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
h2:before,
h2:after {
content: '';
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
}
h2:after {
margin: 0 0 0 20px;
}
And here is the CSS Grid solution: https://codepen.io/trys/pen/vjRzPa
h2 {
display: grid;
width: 100%;
align-items: center;
text-align: center;
grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
grid-gap: 20px;
}
h2:before,
h2:after {
content: '';
border-top: 2px solid;
}