- Web Developer's Reference Guide
- Joshua Johanan Talha Khan Ricardo Zea
- 400字
- 2021-07-09 20:18:24
Generated content
This is not a selector, but is used with the pseudo-elements ::before
and ::after
. There are only certain types of content that you can generate. Here is a rundown.
content
This is the content that will be placed either before or after elements:
content(none, <string>, <uri>, <counter>, open-quote, close-quote, no-open-quote, no-close-quote, attr(x))
Parameters
Following are the parameters and their description:
none
: This parameter does not generate any contentnormal
: This is the default parameter and is the same as none<string>
: This is any string text content<uri>
: This will map to a resource, for example, an image<counter>
: This can be used as either thecounter()
orcounters()
function to put a counter before or after each elementopen-quote
andclose-quote
: This is used with the quotes generated content propertyno-open-quote
andno-close-quote
: This does not add content, but increments or decrements the nesting level of quotesattr(x)
:This returns the value of the attribute of the element this is targeting
Description
This property is used to add content to the document. The output is controlled by the value used. The values can be combined to create more complex content.
A new line can be inserted with the characters \A
. Just remember that HTML will ignore a line break by default.
Here are some examples. These will demonstrate how to use many of the content values:
<h1>First</h1> <h1>Second</h1> <h1 class="test">Attribute</h1> <h2>Line Break</h2> <blockquote>Don't quote me on this.</blockquote>
Here is the CSS. The h1
elements will have the word "chapter
" along with a number before each. The h2
element will have a line break in its content. Finally, the blockquote
will have an opening quote and a closing quote:
h1 { counter-increment: chapter; } h1::before { content: "Chapter" counter(chapter) ": " attr(class) ; } h2::before { content: "New\A Line"; white-space: pre; } blockquote::before { content: open-quote; } blockquote::after { content: close-quote; }
Quotation marks
Quotation marks specify which characters are used as open and close quotes:
quotes: [<string> <string>]+
Parameters
<string> <string>
: These are pairs of characters that will represent an open and close quote. You can use this multiple times to create levels of quotes.
Description
We can use this property to set which quotation marks are used.
Here is an example that has a nested quote:
<blockquote>Don't quote me <blockquote>on</blockquote> this.</blockquote>
The quotation marks are completely arbitrary. Here is the CSS:
blockquote { quotes: ":" "!" "&" "*"; }
- Mastering Selenium WebDriver
- Mastering LibGDX Game Development
- 精通Python自然語言處理
- Learning Selenium Testing Tools(Third Edition)
- C#程序設計
- Windows內核編程
- 利用Python進行數據分析
- Raspberry Pi Robotic Projects(Third Edition)
- JavaScript動態網頁編程
- Python網絡爬蟲技術與應用
- C++程序設計教程(第2版)
- 零基礎學C語言(升級版)
- Getting Started with Python
- Getting Started with React VR
- jQuery從入門到精通(微課精編版)