如何在引用或块引用标签上创建水平线

Question

在我的html模板中，我希望quote或blockquote标签如下图所示..示例

我想在哪里创建那些顶部和底部的线，它们分为两部分和中间那个引号。

我从根本上了解如何使用 <hr> 或 div:after { content: ""; width: 120px height: 3px; } 创建线条。但我需要水平线与上图完全一样。但是，无法理解。

请帮助，提前感谢您的时间。

Answer 1

我认为我的引用与你的不同，但我认为这只是字体问题。

.line_box {
  margin: 0px;
  padding: 0px;
  text-align: center;
  position: relative;
}

.line_box span {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -5px;
  color: red;
}

.line_box hr {
  float: left;
}

.line1 {
  width: 20%;
  border-color: red;
  margin-top: 10px;
}

.line2 {
  width: 2%;
  border-color: red;
  border-width: 2px;
}

.line3 {
  width: 50%;
  border-color: transparent;
}

h1 {
  clear: both;
  text-align: center;
}

<div class="box">
  <div class="line_box">
    <hr class="line1">
    <hr class="line2">
    <hr class="line3">
    <hr class="line2">
    <hr class="line1">  
    <span>“„</span>
  </div>
  
  <h1>Some text</h1>
  
  <div class="line_box">
    <hr class="line1">
    <hr class="line2">
    <hr class="line3">
    <hr class="line2">
    <hr class="line1">    
  </div>
</div>