Draw square brackets around multi-line text

Question

I have wrapped heading with square brackets but on mobile it looks ugly. how do we keep square brackets around the text if text goes to next line.

Here is HTML and CSS code

.widget-title:before {
  content: '[';
  color: #ffb1bb;
  font-size: 60px;
  text-align: right;
  padding-right: 10px;
}
.widget-title:after {
  content: ']';
  color: #ffb1bb;
  font-size: 60px;
  text-align: left;
  padding-left: 10px;
}

<h4 class="widget-title widgettitle">WHAT’S NEW</h4>

Answer 1

Update: This works for the first line overflowing to the second line.

---

If you can use a flexbox, it would suffice to add this to widget-title:

display: flex;
align-items: center;

See demo below:

.widget-title {
  display: flex;
  align-items: center;
}
.widget-title:before {
  content: '[';
  color: #ffb1bb;
  font-size: 60px;
  text-align: right;
  padding-right: 10px;
}
.widget-title:after {
  content: ']';
  color: #ffb1bb;
  font-size: 60px;
  text-align: left;
  padding-left: 10px;
}

<div class="widget-title">This is a very long title, and too long as it is now. This is a very long title, and too long as it is now. This is a very long title, and too long as it is now</div>

Answer 2

Here is another approach that can achieve this without the use of any pseudo elements.

Steps:

• Create an element like <div> or <span> and make it an inline-block element so that its length becomes dependent on its content i.e length of this element will be as long as content inside it.
• Apply left / right borders.
• Use linear-gradient() to create 4 background images with specific width / height and draw on each corner of the box with background-position.

Necessary CSS:

div {
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb);

  background-repeat: no-repeat;
  background-size: 8px 3px;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  border-width: 0 3px;
}

Useful Resources:

• Linear Gradient: MDN, W3.

• Background Image: MDN, W3.

Output Image:

* {box-sizing: border-box;}

body {
  background: linear-gradient(white, silver);
  min-height: 100vh;
  margin: 0;
}

.widget-title {
  font: 20px/26px Arial, sans-serif;
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb);
  
  background-repeat: no-repeat;
  background-size: 8px 3px;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  text-align: justify;
  border-width: 0 3px;
  display: inline-block;
  vertical-align: top;
  padding: 5px 15px;
  margin: 20px;
}

<h4 class="widget-title widgettitle">WHAT’S NEW</h4>

<h4 class="widget-title widgettitle">This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence...</h4>