Embrace the words enveloped within large quotation marks

I am seeking a way to format paragraphs with large quotation marks surrounding them. I have attempted several methods, but my line-height seems to be affected, as shown in the following image:

Can anyone suggest a proper method for achieving this?

(Additionally, is there a stylish closing variation for this quote? >> 69) 

<p><span>&#8223</span><a href="#">Foobar</a><br />Foobar<br />Foobar<span>&#8223</span></p>
<p><span>&#8223</span><a href="#">Foobar</a><span>&#8223</span></p>
<p><span>&#8223</span><a href="#">Foobar</a><span>&#8223</span></p>

body {
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: rgba(50, 50, 50, 1);
}

span {
    font-size: 100px;
    position: relative;
    top: 50px;
}

p {
    line-height: 10px;
}
htmlcss

Answer №1

provides valuable insights on the topic.

This Demonstration demonstrates how it can be implemented

CSS

blockquote {
    background: #f9f9f9;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
    padding: 30px;
    position:relative;
}
blockquote:before {
    position:absolute;
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    top:0;
    left:0;
}
blockquote:after {
    position:absolute;
    color: #ccc;
    content: close-quote;
    font-size: 4em;
    line-height:0;
    bottom:0;
    right:0;
}

HTML

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel turpis at libero cursus sagittis.
Nullam molestie posuere purus sed aliquet. Integer euismod neque nec justo venenatis, eget consequat nunc pulvinar. Fusce et scelerisque ex. Aliquam erat volutpat
</blockquote>

Answer №2

The special styling of the blockquote is designed to appear differently in various browsers; displaying with large quotes before in standards-compliant browsers, and with a thick left border and light grey background in Internet Explorer. This unique approach to styling blockquotes eliminates the need for nested block-level elements like p, converting a paragraph into an inline-styled element to prevent content from dropping below the quote.

Custom CSS Styling

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  /* Custom quotation marks */
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
/* Maintain inline display for blockquote paragraphs */
blockquote p {
  display: inline;
}

View JSFiddle example here: - http://jsfiddle.net/xgku06ho/

Answer №3

Give this a shot - 

p:before {
 content: '"';
}

p:after {
 content: '"';
}

Answer №4

To solve this issue, consider using pseudocode.

p {
  line-height: 10px;
  background: #f9f9f9;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
p:before {
  color: #ccc;
  content: '';
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

Check out the demonstration here.

Answer №5

If you find that using images in CSS is necessary to achieve the desired result, feel free to tweak the open and close images as needed: http://jsfiddle.net/csdtesting/funeygf0/

blockquote.style3 {
  font: 18px/30px normal Tahoma, sans-serif;
  padding-top: 22px;
  margin: 5px;
  background-image: url(http://css-tricks.com/examples/Blockquotes/images/openquote3.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 65px;
}
blockquote.style3 span {
  display: block;
  background-image: url(http://css-tricks.com/examples/Blockquotes/images/closequote3.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
}
<blockquote class="style3"><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt  soluta sequitur autem.</span>
</blockquote>

Here's the expected outcome:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the extra room at the bottom of my webpage?

I've been teaching myself how to create responsive websites using Zurb's Foundation 6. I've successfully built a simple website, but I'm facing an issue with spacing at the bottom of the page. The problematic areas are the "pagination" ...

htmlcsszurb-foundation

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

javascripthtmlcss

"Why is my Python Selenium code returning an empty list when trying to find elements by xpath

Currently, I am attempting to extract a table from a password-protected website using Firefox. In order to access the table, I must first select the product, input the dates for the start and end, and complete the verification process by sliding. My goal i ...

pythonhtmlseleniumweb-scraping

Smooth carousel navigating through dots

I am currently using the slick carousel from http://kenwheeler.github.io/slick, and I am looking for a way to limit the number of dots to 8 even when there are more than 8 slides. The navigation dots should include arrows on the left and right sides to in ...

javascriptjquerycsscarouselslick.js

Develop a reusable block of Vue template when creating a new component

There are times when I find myself needing to repeat certain sections of HTML code in my Template just to keep it DRY. However, creating a new component and passing multiple props and dynamic data seems like too much work. Is there a simpler way to define ...

htmltemplatesvue.jsdryextends

How to eliminate margins in Django's easy_pdf module

For generating PDF from HTML, I utilize easy_pdf in conjunction with xhtml2pdf. Below is a brief example: In view.py from easy_pdf.rendering import render_to_pdf_response context = dict({'user_company': 'test'}) template_name = "pdf ...

pythoncssdjangopython-3.xdjango-templates

Is there a method to display text on the screen after a countdown has finished?

I am looking for a way to display some text or an image of a cake on the screen once this countdown reaches zero. It's a countdown leading up to my birthday, and I really want it to have that special touch at the end. However, I've been strugglin ...

htmlcountdown

Trouble with HTML2PDF.js - download not being initiated

Currently, I am utilizing html2pdf.js in my project by following this tutorial: https://github.com/eKoopmans/html2pdf.js However, I've encountered an issue where despite implementing everything as instructed, the download prompt for the specified div ...

javascripthtmlcss

How to use jQuery to select an element by using 'this' on a button

I have a total of 5 divs, each containing 5 different texts. <div class="text"> <%= theComment.text %> </div> I am working with node.js, MongoDB, and Mongoose. In addition to the divs, I also have a button labeled EDIT with a cl ...

javascriptjqueryhtmlnode.jsmongodb

Certain parts of the CSS grid are not aligning properly within the grid lines

I'm having trouble with my CSS grid. The red section fits in the first square, but the rest of the content seems to be out of place in the grid. I'm new to all this and I can't figure out what I'm missing. I've tried everything but ...

csscss-grid

Is it possible to send a copy to the sender using a MailTo link?

We have created a simple form that generates an email to submit support tickets. Currently, the emails are sent to our "support staff," but we want to also send a copy to the sender. We are using mailto links. Is there a way to accomplish this? For instan ...

htmlmailtosender

JavaScript Error: Unable to determine the value of a null property

Is there a way to validate the user's input in real-time on an HTML form? Take a look at the following HTML code: <div class="col-md-2"> <input class="form-control" name="nbequipement" id="nbequipement" placeholder="" type="text"> ...

javascripthtmlgetelementbyid

Issues with hover menu arise following relocation of primary menu

#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...

htmlcss

There seems to be a glitch in my PHP comment validation function—it does not seem to be functioning

This form is contained in a PHP file named single.php. <form action="comments.php" method="post" > <?php include(ROOT_PATH . "/app/helpers/formErrors.php"); ?> <input type= "hidden" name="id" value= & ...

phphtml

Is it possible to modify the value on the src img tag prior to scraping the data

Hey everyone, check out this piece of code I have: foreach ($image as $snimka){ $url = $snimka->src; $ch = curl_init($snimka->src); $fp = fopen('images/' . basename($url), 'wb'); curl_setopt($ch, CURLOPT_FILE, $fp ...

phphtmlweb-scraping

What would be the best way to display a label once the zoom level exceeds a certain threshold in Leaflet?

As someone new to the Leaflet library and JavaScript in general, I'm currently facing a challenge with showing/hiding a leaflet label based on the zoom level. The markers are within a 'cluster' layer loaded via AJAX callback, and I bind the ...

javascriptjquerycssjsonleaflet

When using ContentEditable in Firefox, it generates double line breaks instead of a single one

Noticed an interesting issue with div contenteditable where Firefox is interpreting 1 newline as 2 newlines. Is this a bug or am I overlooking something? Test it out in the example below by typing: Hello World within the contenteditable. When accessi ...

htmlfirefoxcontenteditable

Is it possible to utilize viewport height as a trigger for classes in Gatsby?

Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...

javascriptcssreactjsgatsbytailwind-css

The attribute 'checked' is not a valid property for the 'TElement' type

Learning about typescript is new to me. I have a functional prototype in fiddle, where there are no errors if I use this code. http://jsfiddle.net/61ufvtpj/2/ But in typescript, when I utilize this line - if(this.checked){ it presents an error [ts] Pro ...

javascriptjquerycssangulartypescript

The hover dropdown remains active even after the mouse has left

I've created a script for displaying a dropdown menu on small screens with a click (or tap on mobile), but I want it to change to hover when the screen size is larger. Here's my code: $(document).ready(function() { var open = false; ...

javascriptjquerycss