Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/list-style-position below:

list-style-position · WebPlatform Docs

Specifies if the list-item markers should appear inside or outside the content flow.

Initial value

outside

Applies to

elements with ‘display: list-item’

Inherited

Yes

Media

visual

Computed value

as specified

Animatable

No

CSS Object Model Property

listStylePosition

• list-style-position: inherit
• list-style-position: inside
• list-style-position: outside

outside

Default. Marker is placed outside the list item, and any wrapping text is not aligned under the marker.

inside

Marker is placed inside the text, and any wrapping text is aligned under the marker.

inherit

Takes the same specified value as the property for the element’s parent. (Acts similarly to other uses of inherit in CSS.)

The following example uses the list-style-position attribute and the list-style-position property to set the position for markers.

.firstlist { list-style-position:inside }
.secondlist { list-style-position:outside }

View live example

The following example shows how to change the value dynamically using JavaScript. The value changes from outside to inside when the mouse is over the list

var ul = document.getElementById('list-hover');


ul.addEventListener('mouseover', function () {
    ul.style.listStylePosition = 'inside';
});


ul.addEventListener('mouseout', function () {
    ul.style.listStylePosition = 'outside';
});

View live example

An example to show how setting padding-left to 0 when position is set to outside will produce the market not being shown at all. A ul contained in a div with overflow hidden might run into this issue.

ul {
    padding-left: 0;
}

.list-position-outside {
    list-style-position: outside;
}

.list-position-inside {
    list-style-position: inside;
}

View live example

 ===Remarks===

If a list-style-position is set to outside and padding-left is set to 0, the marker will not show.

CSS Level 2 (Revision 1)

Recommendation

• background-blend-mode

• background-position

• break-before

• height

• list-style

• list-style-position

• text-overflow-ellipsis

• text-overflow-mode

• text-rendering

• user-select

• equality

• Attribute selector

• hyphen

• prefix

• substring

• suffix

• baseline-shift

• JavaScript animation

• CSSStyleDeclarationCSSStyleDeclaration
• currentStylecurrentStyle
• runtimeStyleruntimeStyle
• stylestyle

• Mozilla Developer Network : Article

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4