CSS Quickies: the quotes property and the q HTML tag

What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in depth. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments! I answer all the questions.

Lets talk about quotes in CSS

Did you know that you can set costume quotes with CSS?

Your first question maybe but why do I need custom quotes in the first place. Let me give you some examples.

• the <q> tag will not be selected if a user wants to copy. This can help in some scenarios where you want the user to select something and paste it into a terminal.
• You need a specific type of quote. There are single quotes, double quotes, angle quotes, double angle quotes, high italic quotes, and many more.
• You don't need quotes but want to prepend and append custom text or emojis.

The <q> tag

If you want to add quotes around any other HTML, you can do this by surrounding them with the tag.

 <q>this will be in quotes.</q>

This will produce the following output: "this will be in quotes." But what if you want to have \' as the quote or you maybe need << >>.

the quotes property in CSS

To change the default behavior of the quotes, you will need to set the opening and closing quote. This is done like this:

q {
  quotes: "<" ">"
}

 <q>this will be in quotes.</q>

This will produce almost the same output as the one before, but now the text will be wrapped in <>. This is how it will look like:

Second level quotes

Sometimes you will have quotes inside of quotes. This can happen if you quoting someone and that someone is already quoting someone else. This can gove even levels deeper, but CSS does not support this. So here is an example:

<q>First Level quotes <q>Second Level quotes</q></q>

The output will look like this: "First Level quotes 'Second Level quotes'". Now if you want to customize this, you simply need to add to more parameters to the quotes property.

q {
  quotes: "<" ">" "<<" ">>"
}

<q>First Level quotes <q>Second Level quotes</q></q>

Now the output will look like this: <>>. That was also easy right?

What if you want to have custom quotes around other elements then the tag?

Custom quotes around any HTML tag

Since custom quotes can be any string you can think of it can also contain emojis 😀. You now want to have an emoji before or after your span element with the class "custom-quotes-element". The beginning is easy; it starts like always.

.custom-quotes-element {
  quotes:'🙌' '🙌';
}

If you applied it only like that, it would not work. You need to set special value for the content property in the pseudo-elements before and after.

.custom-quotes:before {
  content: open-quote;
}

.custom-quotes:after {
  content: close-quote;
}

The code should be pretty easy to understand. In the before case, we need to set content to open-quote. This will indicate that you want to have the first or third string from thequotesproperty here and for theafterpseudo-element that you want to have the string as the content from the second and fourth string from thequotes` property. That's it!

I have created a small demo hero on codepen.

👋Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube