Using only CSS to style a blockquote

Currently attempting to customize the appearance of a blockquote to match this design:

However, it currently appears like this:

(it should not have any white spaces at the beginning)

The code I'm using 

<blockquote><p>Lorem ipsum...</p></blockquote>

blockquote {
margin: 1em 2em;
border-left: 1px solid #999;    
padding-left: 1em; }

blockquote:before {
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative; left: -15px;
}

blockquote p:first-letter {
margin: .2em .3em .1em 0;
font-size: 220%;
 }
/* without unnecessary font type/color attributes*/

Struggling to find an alternative solution that is more reliable and adapts well to different window sizes - ideally using pure CSS. Do you have any suggestions to eliminate unnecessary spacing?

htmlcss

Answer №1

I made some adjustments by adding a float left and making changes to the top/left positioning statements.

blockquote:before{
 content: open-quote;
 font-size: 6em;
 line-height: 0px;
 margin: 0px 5px 0px -40px;
 vertical-align: bottom;
 position: relative;
 float: left;
 top: .4em;
 left: -.15 em;
}

Below is the result. Please note that I did not try to match your fonts and colors exactly.

Answer №2

To easily position the pseudo element within a blockquote, apply position: relative to the blockquote and then use position: absolute. You can check out a demonstration of this technique on this jsfiddle link: http://jsfiddle.net/VZxhH/1/


blockquote {
    border-left: 1px solid #999;
    position: relative;
    padding-left: 1em;
    margin: 1em 2em;
}

blockquote:before {
    content: open-quote;
    position: absolute;
    font-size: 6em;
    left: -38px;
    top: -23px;
}

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

Implementing jQuery UI Dialog for inserting form data into mySQL database

I have integrated the jQuery UI Dialog for user registration on my website. While the dialog functions properly, I am facing an issue with the AJAX call when the form is submitted. Despite searching online for a solution, I have not been able to find one t ...

phpjqueryhtmlajaxuser-interface

Guide on deactivating the HTML drawer layout on a website with Selenium using Java

I am currently working on automating a website and I have encountered a challenge with a drawer Menu Panel. My goal is to open the menu, verify certain elements within it, and then close or hide it. However, I am facing difficulty in closing/hiding this d ...

javahtmlseleniumautomation

Merge two methods to create proportional buttons that function flawlessly on Mac Firefox

code I am facing an issue with the buttons in my code. While they work fine on Mac Firefox, they are not proportional. I made modifications to make them proportional as desired, but now they are not working on Mac Firefox. Since I have multiple pages wit ...

cssbootstrap-4

The compatibility issues with the textarea and text-indent: placeholder feature on EDGE are causing functionality problems

I'm facing a peculiar problem with placeholders when using the Edge browser. In my current project, I need to implement a textarea with a specific text-indent property. However, on Edge, the placeholder text appears displaced more than expected. To h ...

htmlcssmicrosoft-edge

Convert components into <input> using the "Edit" button, and store information with the "Save" button

My HTML script looks like this: <ul id="data"> <li>Value 1</li> <li>Value 2</li> <li>Value 3</li> <li>Value 4</li> </ul> <br> <div id="buttons"> ...

javascripthtmljquery

Retrieving Image Paths from SQLite Database

I have an image path stored in a SQLite table named images under the column path. I am attempting to retrieve this path and use it as the src attribute for an HTML image. However, my current approach is not yielding the desired result. How can I properly ...

phphtmlsqlite

Position navbar contents at the top of the screen

As I delve into learning Bootstrap4, I have come across the following snippet of HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

htmlcssbootstrap-4

Tips for creating line breaks in Google Chart tooltips

I'm having trouble breaking a line in the code snippet below. Here is the complete code: <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script ...

javascripthtml

Automated tab swapping with Bootstrap

Hello there! I've recently started working on a new website using Bootstrap4. I have created some tabs and would like them to switch automatically after every 3 seconds. Can anyone help me achieve this? Below are the tabs I have created: <div clas ...

javascripthtmlbootstrap-4

Adjust the href attribute of a link dynamically using the value input from a text field immediately

Is there a way to dynamically change the href attribute of a link when a user types in an input field? And is it possible to detect when a user pastes content into the input field as well? Would appreciate any suggestions on how to accomplish this using j ...

javascriptjqueryhtmlevents

The execution of certain JavaScript code is failing to display properly when utilizing the document.getElementById method

PHP Code <input type="text" placeholder="ID" name="instructor_id"><br> <div class="errors"> <strong id="errorSeven"></strong> </div> $queryCheck1 = "SELECT ins ...

javascriptphphtml

Finding the error related to Jquery's .siblings() function has been quite challenging for me

Hello, I need some help troubleshooting my jQuery code. I am attempting to create a hover effect where hovering over one text element will apply CSS to the other two elements. I'm not sure if the issue lies in the $(".yo") or the ('blur') pa ...

jqueryhtmlcss

What methods are available for testing JavaScript interactions like freehand drawing on an HTML5 canvas using a mouse?

When it comes to testing object states, I am well-versed in using rspec in Ruby on Rails models. For instance, ensuring that a certain object meets certain expectations based on its prior state and a specific call. However, I am now faced with a new chall ...

jqueryhtmlcanvastddjasmine

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

css

Tips for setting discrete mapper style in cytoscapejs?

Currently, I am defining the style of cytoscape.js through CSS and converting it to JSON format using this resource. My goal is to implement a discrete mapper for styling. It's similar to the scenario discussed in How to use a descreteMapper like on c ...

cssjsoncytoscape.js

Eliminate JavaScript comments with Regex in PHP

Looking to reduce the size of HTML code with the help of PHP and Regex. Here is the minify function: public static function sanitize_output($buffer) { $search = array( '/ {2,}/', '/<!--.*?-->|\t|(?:\r?& ...

javascriptphphtml

The alignment of margins appears as intended in Opera, Chrome, and IE, but unfortunately it does not

I have exhausted all possible options, but I am still struggling to get this page to appear correctly in Firefox. When you click inside the square, a menu with images should display on the right side. It is properly aligned in every browser except for Fire ...

cssfirefoxmargin

Pay attention to the input field once the hidden attribute is toggled off

In attempting to shift my attention to the input element following a click on the edit button, I designed the code below. The purpose of the edit is to change the hidden attribute to false. Here's what I attempted: editMyLink(i, currentState) { ...

htmljqueryangulartypescript

The full page image slider in my HTML website is experiencing issues with loading images properly

My website is having trouble loading a full-page image slider. It seems like the images are not loading properly, possibly due to a javascript issue. Check out my script below: $("#menutoggle").click(function() { $('.xs-menu').toggleClass(& ...

javascriptjqueryhtmlcssbootstrap-4

Using PHP to create an HTML text box that calculates the total amount by multiplying the quantity with the

$res=mysql_query($qry); while($row= mysql_fetch_array($res)) { echo "<tr><td>".$row['Food_Name']."</td> <td>".$row['Price']."</td> <td><input type='text' name='qty". $row['code& ...

javascriptphpjqueryhtmlajax