在 multi-line 文本周围绘制方括号

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>

Answer 2

为父元素指定样式。

尝试--

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

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

Answer 3

这是另一种无需使用任何伪元素即可实现此目的的方法。

步骤：

创建一个类似 <div> 或 <span> 的元素，并将其设为 inline-block 元素，使其长度取决于其内容，即该元素的长度与内容一样长在里面。
应用左/右边框。
使用 linear-gradient() 创建 4 个具有特定 width / height 的背景图像，并在框的每个角上绘制 background-position。

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

有用资源：

线性渐变：MDN, W3.
背景图片：MDN, W3.

输出图像：

* {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>

在 multi-line 文本周围绘制方括号

Draw square brackets around multi-line text

html

css

pseudo-element