Text content with css

content

The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.

Try it

Syntax

/* Keywords that cannot be combined with other values */ content: normal; content: none; /* values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); content: image-set("image1x.png" 1x, "image2x.png" 2x); /* alt text for generated content, added in the Level 3 specification */ content: url("http://www.example.com/test.png") / "This is the alt text"; /* value */ content: "prefix"; /* list of content values */ content: "prefix" url("http://www.example.com/test.png"); content: "prefix" url("http://www.example.com/test.png") "suffix" / "This is some alt text"; /* values, optionally with */ content: counter(chapter_counter); content: counter(chapter_counter, upper-roman); content: counters(section_counter, "."); content: counters(section_counter, ".", decimal-leading-zero); /* attr() value linked to the HTML attribute value */ content: attr(value string); /* Language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* Except for normal and none, several values can be used simultaneously */ content: open-quote counter(chapter_counter); /* Global values */ content: inherit; content: initial; content: revert; content: revert-layer; content: unset; 

Values

When applied to a pseudo-element, the pseudo-element is not generated. If applied to an element, the value has no effect.

Computes to none for the ::before and ::after pseudo-elements.

Specifies the «alt text» for the element. This value can be any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, \000A9 represents the copyright symbol.

A list of anonymous inline boxes that will replace the content of the selected element (in the specified order). This list can include strings, images, counters, and so on.

The value of a CSS counter, generally a number produced by computations defined by and properties. It can be displayed using either the counter() or counters() function.

The counter() function has two forms: ‘counter(name)’ or ‘counter(name, style)’. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified ( decimal by default).

The counters() function also has two forms: ‘counters(name, string)’ or ‘counters(name, string, style)’. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated ( decimal by default).

The value of the element’s attribute x as a string. If there is no attribute x , an empty string is returned. The case-sensitivity of attribute names depends on the document language.

These values are replaced by the appropriate string from the quotes property.

Introduces no content, but increments (decrements) the level of nesting for quotes.

Alternative text may be specified for an image (or list of content items) by appending a forward slash and then the text. The alternative text is intended for speech output by screen-readers, but may also be displayed in some browsers. Note that if the browser does not support alternative text, neither the content or alternative text will be used.

Accessibility concerns

CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page’s purpose, it is better to include it in the main document.

Formal definition

Initial value	normal
Applies to	All elements, tree-abiding pseudo-elements, and page margin boxes
Inherited	no
Computed value	On elements, always computes to normal . On ::before and ::after , if normal is specified, computes to none . Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.
Animation type	discrete

Formal syntax

content =
normal |
none |
[ | ] [ / [ | ]+ ]? |
element( )

=

=
[ | contents | | | | | ]+

=
|

=
|

=
open-quote |
close-quote |
no-open-quote |
no-close-quote

=
|
|

=
leader( )

=
counter( , ? )

=
counters( , , ? )

=
url( * ) |
src( * )

=
target-counter( [ | ] , , ? )

=
target-counters( [ | ] , , , ? )

=
target-text( [ | ] , [ content | before | after | first-letter ]? )

=
dotted |
solid |
space |

=
|

=
symbols( ? [ | ]+ )

=
cyclic |
numeric |
alphabetic |
symbolic |
fixed

Examples

Headings and quotes

This example inserts quotation marks around quotes, and adds the word «Chapter» before headings.

HTML

h1>5h1> p> According to Sir Tim Berners-Lee, q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"> I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half. q> We must understand that there is nothing fundamentally wrong with building on the contributions of others. p> h1>6h1> p> According to the Mozilla Manifesto, q cite="http://www.mozilla.org/en-US/about/manifesto/"> Individuals must have the ability to shape the Internet and their own experiences on the Internet. q> Therefore, we can infer that contributing to the open web can protect our own individual experiences on it. p> 

CSS

q  color: blue; > q::before  content: open-quote; > q::after  content: close-quote; > h1::before  content: "Chapter "; /* The trailing space creates separation between the added content and the rest of the content */ > 

Result

Image combined with alternative text

This example inserts an image before the link and provides alternative text that a screen reader can output as speech. Some browsers may also display the alternative text.

HTML

a href="https://www.mozilla.org/en-US/">Mozilla Home Pagea> 

CSS

The CSS to show the image and set the alternative text is shown below. This also sets the font and color for the content. This will only be used on browsers that display the alternative text.

a::before  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " MOZILLA: "; font: x-small Arial, sans-serif; color: gray; > 

Result

The browser should display the icon before the link below. If using a screen reader, it should speak the word «MOZILLA» when it reaches the image.

Note that on a browser that does not support the alternative text syntax, the whole line is invalid. In this case neither the image or alternative text will be used! You could partially address this issue by including CSS that adds the image before the line with them both.

Targeting classes

This example inserts additional text after special items in a list.

HTML

h2>Paperback Best Sellersh2> ol> li>Political Thrillerli> li class="new-entry">Halloween Storiesli> li>My Biographyli> li class="new-entry">Vampire Romanceli> ol> 

CSS

.new-entry::after  content: " New!"; /* The leading space creates separation between the added content and the rest of the content */ color: red; > 

Result

Images and element attributes

This example inserts an image before each link, and adds its id attribute after.

HTML

ul> li>a id="moz" href="https://www.mozilla.org/"> Mozilla Home Pagea>li> li> a id="mdn" href="https://developer.mozilla.org/"> Mozilla Developer Networka > li> ul> 

CSS

a  text-decoration: none; border-bottom: 3px dotted navy; > a::after  content: " (" attr(id) ")"; > #moz::before  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); > #mdn::before  content: url("mdn-favicon16.png"); > li  margin: 1em; > 

Result

Element replacement with url()

This example replaces an element’s content with an image url() . Content added with ::before or ::after will not be generated as the contents of the element have been replaced.

HTML

CSS

#replaced  content: url("mdn.svg"); > /* will not show if element replacement is supported */ #replaced::after  content: " (" attr(id) ")"; > 

Result

Element replacement with

This example replaces an element’s content with a linear-gradient() .

HTML

CSS

div  width: 100px; height: 100px; border: 1px solid lightgrey; > 

#replaced  content: linear-gradient(purple, yellow); > 

Result

Element replacement with image-set()

This example replaces an element’s content with a image-set() . If the users display has normal resolution the 1x.png will be displayed screens with a higher resolution will display the 2x.png image.

HTML

CSS

div  width: 100px; border: 1px solid lightgrey; > 

#replaced  content: image-set( "1x.png" 1x, "2x.png" 2x ); > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Using CSS generated content

This article describes some ways in which you can use CSS to add content when a document is displayed. You modify your stylesheet to add text content or images.

One of the important advantages of CSS is that it helps you to separate a document’s style from its content. However, there are situations where it makes sense to specify certain content as part of the stylesheet, not as part of the document. You can specify text or image content within a stylesheet when that content is closely linked to the document’s structure.

Note: Content specified in a stylesheet does not become part of the DOM.

Specifying content in a stylesheet can cause complications. For example, you might have different language versions of your document that share a stylesheet. If you specify content in your stylesheet that requires translation, you have to put those parts of your stylesheet in different files and arrange for them to be linked with the appropriate language versions of your document.

This issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures.

Examples

Text content

CSS can insert text content before or after an element, or change the content of a list item marker (such as a bullet symbol or number) before a or other element with display: list-item; . To specify this, make a rule and add ::before , ::after , or ::marker to the selector. In the declaration, specify the content property with the text content as its value.

HTML

span class="ref">somethingspan> 

CSS

.ref::before  font-weight: bold; color: navy; content: "Reference "; > 

Output

The character set of a stylesheet is UTF-8 by default, but it can also be specified in the link, in the stylesheet itself, or in other ways. For details, see 4.4 CSS style sheet representation in the CSS Specification.

Individual characters can also be specified by an escape mechanism that uses backslash as the escape character. For example, «\265B» is the chess symbol for a black queen ♛. For details, see Referring to characters not represented in a character encoding and Characters and case in the CSS Specification.

Image content

To add an image before or after an element, you can specify the URL of an image file in the value of the content property.

This rule adds a space and an icon after every link that has the class glossary :

HTML

a href="developer.mozilla.org" class="glossary">developer.mozilla.orga> 

CSS

a.glossary::after  content: " " url("glossary-icon.gif"); > 

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник