整个 div 括号内

Question

我有一个 div 包含一些文本，我想将整个文本（即整个 div）放在括号中。

类似的东西：

我想过使用边框 top/bottom/right/left 但不知道如何调整顶部和底部 space..

有什么想法吗？

Answer 1

使用pseudoelement.....

body {
  background: black;
  margin: 0;
}

.border-brackets {
  background: black;
  text-align: center;
  padding: 2em;
  color: white;
  margin: 2em;
  border: 1px solid white;
  position: relative;
}

.border-brackets:before {
  content: '';
  position: absolute;
  display: block;
  background: black;
  z-index: 1;
  width: 80%;
  left: 0;
  right: 0;
  top: -1px;
  height: calc(100% + 2px);
  margin: auto;
}

.border-brackets p {
  position: relative;
  z-index: 2;
}

<div class="border-brackets">
  <p>some text here some text here some text here some text here some text here some text here some text here </p>
</div>

Answer 2

可以使用伪元素：

.test {
  position: relative;
}

.test:after,
.test:before {
  content: '';
  display: block;
  width: 50px;
  /* length of top and bottom lines */
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid black;
  z-index: -1;
}

.test:after {
  right: 0;
  border-left: 0;
}

.test:before {
  left: 0;
  border-right: 0;
}

<div class="test">
lots of text and stuff<br>
lots of text and stuff<br>
lots of text and stuff<br>
</div>

Answer 3

您可以创建一个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>

整个 div 括号内

The whole div between brackets

css

border