Using double quotation marks in CSS styling

Question

Using double quotation marks in CSS styling

I am currently working on converting a design into HTML and CSS.

https://i.sstatic.net/INP31.png

So far, I have been able to recreate the design in JSFiddle, but I'm struggling to add double inverted commas as shown in the original design.

In the HTML code snippet below, you can see how I've tried to create the second paragraph:

<div id="line2" class="col-lg-12">
                    <div class="cofounder-ceo-image">
                        <img src="assets/img/Uploads/jack_v1.jpg"> </div>
                    <p>Whatever you say Whatever you say [...] say</p>

                    <p class="ceo">Jack Lau - Co-founder and CEO</p>
                </div>

I'm interested to know if there is a CSS solution to replicate double inverted commas or if it's best to insert an image of them at a specific location?

html css

Answer 1

Answer №1

To create a visual effect where one element is attached to another, you can utilize pseudo-elements such as ::after and ::before in your CSS code:

.our-vision p{
  position: relative;
}

.our-vision #line2 > p::before,
.our-vision #line3 > p::after{
  position: absolute;
  font-size: 5em;
  color: #ccc;
}

.our-vision #line2 > p::before{  
  content:"\201D";
  top: -0.5em;
  right: -0.5em;
}

.our-vision #line3 > p::after{
  content:"\201C";
  bottom: -0.5em;
  left: -0.5em;
}

Check out the live demo on Fiddle: https://jsfiddle.net/ttfwchq3/3/

However, it appears that the design concept resembles a reverse direction blockquote. Consider styling a blockquote element instead for a more semantically appropriate approach.

Answer 2

To create a visual effect where one element is attached to another, you can utilize pseudo-elements such as ::after and ::before in your CSS code:

.our-vision p{
  position: relative;
}

.our-vision #line2 > p::before,
.our-vision #line3 > p::after{
  position: absolute;
  font-size: 5em;
  color: #ccc;
}

.our-vision #line2 > p::before{  
  content:"\201D";
  top: -0.5em;
  right: -0.5em;
}

.our-vision #line3 > p::after{
  content:"\201C";
  bottom: -0.5em;
  left: -0.5em;
}

Check out the live demo on Fiddle: https://jsfiddle.net/ttfwchq3/3/

However, it appears that the design concept resembles a reverse direction blockquote. Consider styling a blockquote element instead for a more semantically appropriate approach.

Answer 3

Answer №2

To add inverted quotes after every paragraph, you can utilize the ::after pseudo element. You can position them on either side as needed with the help of CSS. The following code snippet demonstrates how to achieve this effect for the first paragraph (specifically at the right), but you can create a reusable class by adjusting the properties for each side:

#line2 p {
  position: relative;
}
#line2 p:after {
  content: "\"";
  position: absolute;
  top: -50px;
  right: -100px;
  font-size: 140px;
  color: gray;
}

If you require an exact "inverted comma", consider using the same font as your example or opt for an image instead:

#line2 p:after {
  content: url(https://i.sstatic.net/wyH2G.png);
  position: absolute;
  top: -70px;
  right: -100px;
  font-size: 140px;
  color: gray;
}

For further reference and testing, check out this Fiddle.

Answer 4

To add inverted quotes after every paragraph, you can utilize the ::after pseudo element. You can position them on either side as needed with the help of CSS. The following code snippet demonstrates how to achieve this effect for the first paragraph (specifically at the right), but you can create a reusable class by adjusting the properties for each side:

#line2 p {
  position: relative;
}
#line2 p:after {
  content: "\"";
  position: absolute;
  top: -50px;
  right: -100px;
  font-size: 140px;
  color: gray;
}

If you require an exact "inverted comma", consider using the same font as your example or opt for an image instead:

#line2 p:after {
  content: url(https://i.sstatic.net/wyH2G.png);
  position: absolute;
  top: -70px;
  right: -100px;
  font-size: 140px;
  color: gray;
}

For further reference and testing, check out this Fiddle.

Using double quotation marks in CSS styling

Answer №1

Answer №2

Similar questions

Retrieving an image from a JSON file based on its corresponding URL

Using jQuery, you can activate an onclick function based on specific keywords entered by the user

Tips for transforming HTML to a dynatable or datatable

Using JavaScript regular expressions to restrict the characters allowed in an HTML text input field

What is the best way to increase the height of an image in a grid container beyond the height of

Exploring Molecular Structures with ThreeJS - Understanding the Mechanics of Double Bonds

I am trying to confirm in PHP whether any of the gender checkboxes have been selected. However, the code I have tried so far does not appear to be functioning as expected

Guide to dynamically loading separate components on a single page in Angular 9

Header that stays in place even when there is too much content to fit horizontally

Issues with the HTML5 progress bar malfunctioning due to alterations made by Angular

Clicking the load more button fails to retrieve any additional content

Navigate to a specific moment in an HTML5 audio track by clicking on the progress bar

Incorporate a vertical scrollbar in the tbody while keeping the thead fixed for smooth vertical scrolling

Oops! Looks like the image property is undefined in React and causing a TypeError

Avoid refreshing the page and maintaining the most recent data inputted

To navigate to the next page, simply click on the box instead of relying on text links

Tips for synchronizing JavaScript rendering time with Python requests?

The buttons are not resizing to fit the entire table cell

The Urdu font is experiencing issues with its right-to-left direction functionality

Ignoring tags inside a regular expression can be achieved by using the appropriate