How Do I Make Large Quotation Marks Wrap Properly Around Quotations?


Tags: html,css

Problem :

I have a simple div with a short testimonial inside. Structure as follows:

<div id="testimonial">This is a testimonial.<br>A Multi-line testimonial.<br>With at least 3 lines.</div>

I want to wrap the testimonial in quotation marks, and size and color everything, so I've added the following CSS:

#testimonial {
  font-size: 1.125rem; color: #434343;
}
#testimonial::before, #testimonial::after {
  content: '“'; font-size: 3rem; line-height: 1rem; height: 1rem; color: #c9c8c8;
};

The problem is, even though I've applied both a line-height and a height rule to the quotation marks, they remain much larger than the lines of the testimonial itself, thus messing up the look and the lines of the testimonial.

Here's a codepen to demonstrate what's happening: http://codepen.io/anon/pen/zxxZPE

How do I make it so that the large quotation marks take up the same vertical height as the testimonial text, so it looks neat, not messy?



Solution :

Turns out the problem is actually 2 issues in one.

First: the line-height on the quotation marks affects the line height of the last line of the testimonial. As such, the line height for the " should be minimized here (I fixed it by setting line-height for the quotations to 1px).

Second: because the quotations are superscripted, it doesn't really matter what the line-height is, the quotation marks will always be too high up. The best way to resolve this appears to be to set position relative on the pseudo-elements ::before and ::after, and move them down 20 or so pixels.

Here's the updated CSS for the pseudo elements:

#testimonial::before, #testimonial::after {
  content: '"'; font-size: 3rem; line-height: 1px; position: relative; 
  bottom: -20px; color: #c9c8c8;
};

See codepen demonstration here: http://codepen.io/anon/pen/wBBJLG


    CSS Howto..

    How I can apply css to part of my jQuery result?

    jQuery - how do I show the full navbar at certain width?

    How do I create a border for an image?

    How to make bootstrap row “col-md-4” fullscreen size

    How to correctly switch images with javascript?

    How do I make a html page printable without reloading/refreshing the data?

    How to safely display user's text containing all html/css in rails 3

    How to create a pure CSS tooltip with HTML content for inline elements

    How to scroll draw each SVG path one at a time (chronologically)?

    How or where to add javascript settimeout function to CSS vertical drop down menu

    How to Style Similar to an Exam Questi-n

    Show Item when Hover Over Parent

    CSS: How to create a background cutout using elements (not images)?

    jquery easyui TreeGrid: How to make only Column Headers Bold

    How to remove all CSS property inside a class, but don't remove class using jQuery

    How to put text on placeholder image

    What's the proper way to name CSS selectors. It seems inconsistent how it works [duplicate]

    jQuery beginner: how to add css transition when using toggleClass(“open”)?

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How to add css properties inside the PHP tag

    CSS how to vertically center image and text without changing style of image

    How can I make a DIV background change color on hover if the DIV has a class of “disabled”? [closed]

    jQuery — how to animate a div using height:auto

    how to get a rounded corner table with a body in different color with CSS?

    How to use fadeTo, etc. animation tags along with a css change statement in jquery?

    Wordpress: How to add a caption right-aligned to the edge of the image

    How to display source code with indent in a web page? HTML? CSS?

    How to theorize about this phenomenon about
    tag

    How to enlarge and shrink an element in a loop animation through jquery or CSS

    How to add text under every image?