html - 在多行文本周围绘制方括号

Question

我用方括号包裹了标题，但在移动设备上它看起来很难看。如果文本转到下一行，我们如何在文本周围保留方括号。

这是 HTML 和 CSS 代码

.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

更新:这适用于溢出到第二行的第一行。

---

如果您可以使用 flexbox，将其添加到 widget-title 就足够了:

display: flex;
align-items: center;

请看下面的演示:

.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>