CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
Peter
Peter

Reputation: 41

How to create a horizontal line on quote or blockquote tag

In my html template, I want quote or blockquote tag to be like this in the picture below.. example

enter image description here

Where I want to create those lines top and bottom, which is broken in two part and in the middle that quotation mark.

I understand fundamentally how to create line using <hr> or div:after { content: ""; width: 120px height: 3px; } . But I need the horizontal lines to be absolutely like the image above. But, can't understand how.

Please Help, Thanks in Advance for your time.

Upvotes: 0

Views: 1042

Answers (1)

Razvan Pavel
Razvan Pavel

Reputation: 351

I think my quotes are different then yours, but I think that it's just a font issue.

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

Upvotes: 1

Related Questions