recursal/MDN huggingface dataset:
::marker
========

The **`::marker`** CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to `display: list-item`, such as the `<li>` and `<summary>` elements.

Try it
------

Allowable properties
--------------------

The `::marker` pseudo-element supports a limited number of CSS properties, including:

* All font properties
* The `white-space` property
* `color`
* `text-combine-upright`, `unicode-bidi`, and `direction` properties
* The `content` property
* All animation and transition properties

**Note:** The specification states that additional CSS properties may be supported in the future.

Syntax
------


```css
::marker {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
```

### CSS


```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTML elements that have marker boxes by default: `<ol>`, `<li>`, `<summary>`
* CSS generated content module
* CSS lists and counters module
* CSS counter styles module
::first-line
============

The **`::first-line`** CSS pseudo-element applies styles to the first line of a block container.

Try it
------

The effects of `::first-line` are limited by the length and content of the first line of text in the element. The length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. `::first-line` has no effect when the first child of the element, which would be the first part of the first line, is an inline block-level element, such as an inline table.

**Note:** Selectors Level 3 introduced the double-colon notation (`::`) to distinguish pseudo-elements from the single-colon (`:`) pseudo-classes. Browsers accept both `::first-line` and `:first-line`, which was introduced in CSS2.

For the purposes of CSS `background`, the `::first-line` pseudo-element is like an inline-level element meaning that in a left-justified first line, the background may not extend all the way to the right margin.

Allowable properties
--------------------

Only a small subset of CSS properties can be used with the `::first-line` pseudo-element:

* All font-related properties: `font`, `font-kerning`, `font-style`, `font-variant`, `font-variant-numeric`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-alternates`, `font-variant-ligatures`, `font-synthesis`, `font-feature-settings`, `font-language-override`, `font-weight`, `font-size`, `font-size-adjust`, `font-stretch`, and `font-family`
* All background-related properties: `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* The `color` property
* `word-spacing`, `letter-spacing`, `text-decoration`, `text-transform`, and `line-height`
* `text-shadow`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, and `vertical-align`.
Syntax
------


```css
::first-line {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<p>
  Styles will only be applied to the first line of this paragraph. After that,
  all text will be styled like normal. See what I mean?
</p>

<span>
  The first line of this text will not receive special styling because it is not
  a block-level element.
</span>
```

### CSS


```css
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* WARNING: DO NOT USE THESE \*/
  /\* Many properties are invalid in ::first-line pseudo-elements \*/
  margin-left: 20px;
  text-indent: 20px;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `::first-letter`
scroll-padding-inline-start
===========================

The `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
scroll-padding-inline-start: auto;

/\* <length> values \*/
scroll-padding-inline-start: 10px;
scroll-padding-inline-start: 1em;
scroll-padding-inline-start: 10%;

/\* Global values \*/
scroll-padding-inline-start: inherit;
scroll-padding-inline-start: initial;
scroll-padding-inline-start: revert;
scroll-padding-inline-start: revert-layer;
scroll-padding-inline-start: unset;
```

### Values

`<length-percentage>`

An inwards offset from the inline start edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

scroll-padding-inline-start =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Specifications
--------------

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
hyphenate-character
===================

The **`hyphenate-character`** CSS property sets the character (or string) used at the end of a line before a hyphenation break.

Both automatic and soft hyphens are displayed according to the specified hyphenate-character value.

Try it
------

Syntax
------


```css
hyphenate-character: <string>;
hyphenate-character: auto;
```


The value either sets the string to use instead of a hyphen, or indicates that the user agent should select an appropriate string based on the current typographic conventions (default).

### Values

`<string>`

 The `<string>` to use at the end of the line before a hyphenation break.
 The user agent may truncate this value if too many characters are used.


`auto`

 The user-agent selects an appropriate string based on the content language's typographic conventions.
 This is the default property value, and only needs to be explicitly set in order to override a different inherited value.


Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

hyphenate-character =   
  auto      |  
  <string>    
  
```

Examples
--------

 This example shows two identical blocks of text that have `hyphens` set to ensure that they break wherever needed, and on soft hyphen breaks (created using `&shy;`).
 The first block has the value of the hyphen changed to the equals symbol ("`=`").
 The second block has no hyphenate-character set, which is equivalent to `hyphenate-character: auto` for user agents that support this property.

### HTML


```html
<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>
```

### CSS


```css
dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Text Module Level 4 # propdef-hyphenate-character |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `hyphens`, `overflow-wrap`.
-webkit-touch-callout
=====================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `-webkit-touch-callout` CSS property controls the display of the default callout shown when you touch and hold a touch target.

When a target is touched and held on iOS, Safari displays a callout information about the link. This property allows disabling that behavior.

Syntax
------


```css
/\* Keyword values \*/
-webkit-touch-callout: default;
-webkit-touch-callout: none;

/\* Global values \*/
-webkit-touch-callout: initial;
-webkit-touch-callout: inherit;
-webkit-touch-callout: revert;
-webkit-touch-callout: revert-layer;
-webkit-touch-callout: unset;
```

### Values

`default`

The default callout is displayed.

`none`

The callout is disabled.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `default` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

-webkit-touch-callout =
  default | none
```

Examples
--------

### Turn off touch callout


```css
.example {
  -webkit-touch-callout: none;
}
```

Specifications
--------------

Not part of any standard. Apple has a description in the Safari CSS Reference.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebKit CSS extensions
* -webkit-touch-callout in the Apple developer documentation
element()
=========

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`element()`** CSS function defines an `<image>` value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.

A particularly useful scenario for using this would be to render an image in an HTML `<canvas>` element, then use that as a background.

On Gecko browsers, you can use the non-standard `document.mozSetImageElement()` method to change the element being used as the background for a given CSS background element.

Syntax
------


```css
element(id)
```


where:

*id*

The ID of an element to use as the background, specified using the HTML attribute #*id* on the element.

Examples
--------

These examples work in builds of Firefox that support `-moz-element()`.

### A somewhat realistic example

This example uses a hidden `<div>` as a background. The background element uses a gradient, but also includes text that is rendered as part of the background.


```html
<div
 style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
 id="myBackground1"
 style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; rotate: 45deg; color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>
```


The `<div>` element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

### Page Preview

 This example based on Vincent De Oliveira's creates a preview of
 the `<div id="css-source">` inside `<div id="css-result">`.

#### HTML


```html
<div id="css-source">
  <h1>Page Preview</h1>
</div>
<div id="css-result"></div>
```


#### CSS


```css
#css-result {
  background: -moz-element(#css-source) no-repeat;
  width: 256px;
  height: 32px;
  background-size: 80%;
  border: dashed;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 4 # element-notation |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `image()`
* `image-set()`
* `<image>`
* `<gradient>`
* `cross-fade()`
* `document.mozSetImageElement()`
:target-within
==============

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`:target-within`** CSS pseudo-class represents an element that is a target element or *contains* an element that is a target. A target element is a unique element with an `id` matching the URL's fragment. In other words, it represents an element that is itself matched by the `:target` pseudo-class or has a descendant that is matched by `:target`. (This includes descendants in shadow trees.)


```css
/\* Selects a <div> when one of its descendants is a target \*/
div:target-within {
  background: cyan;
}
```

Syntax
------


```css
:target-within {
  /\* ... \*/
}
```

Examples
--------

### Highlighting an article

The `:target-within` pseudo-class can be used to highlight the article if anything inside it has been directly linked to. The `:target` pseudo-class is also being used to show which item has been targeted.

#### HTML


```html
<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
</ol>

<article>
  <h3>My Fun Article</h3>
  <p id="p1">
    You can target <i>this paragraph</i> using a URL fragment. Click on the link
    above to try out!
  </p>
  <p id="p2">
    This is <i>another paragraph</i>, also accessible from the links above.
    Isn't that delightful?
  </p>
</article>
```


#### CSS


```css
article:target-within {
  background-color: gold;
}

/\* Add a pseudo-element inside the target element \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* Style italic elements within the target element \*/
p:target i {
  color: red;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # the-target-within-pseudo |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `:target`
padding-block-end
=================

The **`padding-block-end`** CSS property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Try it
------

Syntax
------


```css
/\* <length> values \*/
padding-block-end: 10px; /\* An absolute length \*/
padding-block-end: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-block-end: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-block-end: inherit;
padding-block-end: initial;
padding-block-end: revert;
padding-block-end: revert-layer;
padding-block-end: unset;
```

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by `writing-mode`) of the containing block. Must be nonnegative.

Description
-----------

The `padding-block-end` property is defined in the specification as taking the same values as the `padding-top` property. However, the physical property it maps to depends on the values set for `writing-mode`, `direction`, and `text-orientation`. Therefore, it could map to `padding-bottom`, `padding-right`, or `padding-left`.

It relates to `padding-block-start`, `padding-inline-start`, and `padding-inline-end`, which define the other paddings of the element.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as `<length>` |
| Animation type | a length |

Formal syntax
-------------
```

padding-block-end =   
  <'padding-top'>    
  
```

Examples
--------

### Setting block end padding for vertical text

#### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-block-end: 20px;
  background-color: #c8c800;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`
* `writing-mode`, `direction`, `text-orientation`
::cue-region
============

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`::cue-region`** CSS pseudo-element matches WebVTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks.


```css
::cue-region {
  color: yellow;
  font-weight: bold;
}
```


The properties are applied to the entire set of cues as if they were a single unit. The only exception is that `background` and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.

Syntax
------


```css
::cue-region | ::cue-region(<selector>) {
  /\* ... \*/
}
```

Permitted properties
--------------------

Rules whose selectors include this element may only use the following CSS properties:

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `color`
* `font`
* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
* `opacity`
* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* `ruby-position`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-shadow`
* `visibility`
* `white-space`
Specifications
--------------

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-region-pseudo-element |

Browser compatibility
---------------------

There is no browser implementing this feature.

See also
--------

* Other WebVTT selectors:
    + `::cue`
    + `:past`
    + `:future`
<string>
========

The **`<string>`** CSS data type represents a sequence of characters. Strings are used in numerous CSS properties, such as `content`, `font-family`, and `quotes`.

Syntax
------

The `<string>` data type is composed of any number of Unicode characters surrounded by either double (`"`) or single (`'`) quotes.

Most characters can be represented literally. All characters can also be represented with their respective Unicode code points in hexadecimal, in which case they are preceded by a backslash (`\`). For example, `\22` represents a double quote, `\27` a single quote (`'`), and `\A9` the copyright symbol (`©`).

Importantly, certain characters which would otherwise be invalid can be escaped with a backslash. These include double quotes when used inside a double-quoted string, single quotes when used inside a single-quoted string, and the backslash itself. For example, `\\` will create a single backslash.

To output new lines, you must escape them with a line feed character such as `\A` or `\00000A`. In your code, however, strings can span multiple lines, in which case each new line must be escaped with a `\` as the last character of the line.

However, to get new lines, you must also set the `white-space` property to appropriate value.

**Note:** HTML entities (such as `&nbsp;` or `&#8212;`) cannot be used in a CSS `<string>`.

Examples
--------

### Examples of valid strings


```css
/\* Simple strings \*/
"This string is demarcated by double quotes."
'This string is demarcated by single quotes.'

/\* Character escaping \*/
"This is a string with \" an escaped double quote."
"This string also has \22 an escaped double quote."
'This is a string with \' an escaped single quote.'
'This string also has \27 an escaped single quote.'
"This is a string with \\ an escaped backslash."

/\* New line in a string \*/
"This string has a \Aline break in it."

/\* String spanning two lines of code (these two strings will have identical output) \*/
"A really long \
awesome string"
"A really long awesome string"
```

Specifications
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # strings |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Units and Values
* CSS Basic Data Types
* Introduction to CSS: Values and Units