css - 括号之间的整个div

Question

我有一个包含一些文本的 div，我想将整个文本(即整个 div)置于括号之间。

类似的东西:

我想过使用 border top/bottom/right/left 但不知道如何用那个空间调整顶部和底部..

有什么想法吗？

Answer 1

您可以创建一个 div，然后使用 :before 和 :after 伪元素来创建左右边框。

div {
  width: 200px;
  position: relative;
  margin: 50px;
  text-align: center;
  padding: 10px;
}
div:before,
div:after {
  content: '';
  height: 100%;
  width: 30px;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: -10px;
}
div:before {
  border-right: 0;
}
div:after {
  border-left: 0;
  right: -10px;
  left: auto;
}
span {
  display: block;
  transform: translateY(100%);
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, unde?</p>
  <span>Lorem ipsum dolor sit.</span>
</div>