Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use content with quotes". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use content with quotes".

A seldom used attribute in CSS is quotes, which is used to define "bracket format", that is, if a text is enclosed, a custom tag replacement will appear before and after the text (can be parentheses, special matches, text, etc.), and quotes supports multi-layer nesting, that is, you can write layer by layer. Take the following HTML text as an example:

The outermost layer, the first floor, the second floor, the second floor, the third floor.

If you write only one layer of quotes attributes, you will see that there is only one kind of parentheses, the front and back parentheses are separated by white space, the two groups are in one unit, and you can have different symbols.

Q {quotes:'

';}

If you write three layers, you will see three kinds of parentheses, and the text will be used as parentheses.

Q {quotes:'

'' ya'ya'('')';}

(please pay attention to the nearest distribution principle of the opening and closing label)

By the same token, we can apply it to content, and the pseudo elements:: before and:: after are in the preset position before and after, or even achieve the effect of parentheses before and after. Take the following HTML text as an example, replace all the Q with span:

The outermost layer, the first floor, the second floor, the second floor, the third floor.

The part of CSS is special, using two interesting values open-quote (opening parentheses) and close-quote (closing parentheses) in the pseudo element content, in other words, open-quote corresponds to, close-quote corresponds to, and because the parentheses are inside the pseudo element, you can specify different colors or styles.

Span {quotes:'

'' ya'ya'('')';} span::before {content:open-quote; color:red;} span::after {content:close-quote; color:#aaa;}

Thank you for your reading, the above is the content of "how to use content with quotes". After the study of this article, I believe you have a deeper understanding of how to use content with quotes, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.