如何在quote或blockquote标记上创建水平线

Question

在我的html模板中，我想在下面的图片中使用quote或blockquote标签。示例

我想创建那些顶部和底部的线条，它们分为两部分，中间部分是引号。

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

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

Answer 1

我认为我的报价与你的报价不同，但我认为这只是一个字体问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;