cssblockquote

Block quote left border same height as text

How can I make a block quote line the exact same height as the text that's inside the element.

Here is an example of what It should look like:

enter image description here

This is the current result that I'm getting from the code that I have created:

blockquote {
  margin: 20px 0 30px;
  padding-left: 20px;
  border-left: 5px solid #1371b8;
}
<blockquote>Test</blockquote>

From the result, we can see that the line Is vertically bigger than the text.

Solution

  • NOTE: inline-flex doesn't support older browsers: http://caniuse.com/#feat=flexbox
    But it does work...

    blockquote {
  font-size: 50px;
  text-transform:uppercase;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 5px solid #66e4b4;
  display:inline-flex;
} 

blockquote span {
  margin-top:-10px;
  margin-bottom:-10px;
}
      <blockquote ><span>windows to the universe</span></blockquote>

    – This answer is based on the original code snippet (found below) by عارف بن الأزرق