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

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

如果您可以使用 a flexbox，则只需将其添加到widget-title：

display: flex;
align-items: center;

请参阅下面的演示：

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;
}