You can create a ordered list using any type of HTML.
counter-reset Initializes a counter, the value is the name of the counter. By default, the counter starts at 0. This property can also be used to change its value to any specific number.
counter-increment Used in element that will be countable. Once counter-reset initialized, a counter's value can be increased or decreased.
counter(name, style) Displays the value of a section counter. Generally used in a content property. This function can receive two parameters, the first as the name of the counter and the second one can be decimal or upper-roman (decimal by default).
counters(counter, string, style) Displays the value of a section counter. Generally used in a content property. This function can receive three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be decimal or upper-roman (decimal by default).
A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the counters() function, separating text can be inserted between different levels of nested counters.
justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
Alternatively, use justify-content: space-around to distribute the children with space around them, rather than between them.
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the background-size property.
justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
Alternatively, use justify-content: space-around to distribute the children with space around them, rather than between them.
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the background-size property.
A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility (ADA) development when more context is needed for visually-impaired users. As an alternative to display: none which is not readable by screen readers or visibility: hidden which takes up physical space in the DOM.
HTML
<a class="button" href="http://pantswebsite.com">
- Learn More
- <span class="offscreen"> about pants</span>
+ Learn More <span class="offscreen"> about pants</span>
</a>
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
HTML
<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller">
- Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
- Iure id exercitationem nulla qui repellat laborum vitae, <br>
- molestias tempora velit natus. Quas, assumenda nisi. <br>
- Quisquam enim qui iure, consequatur velit sit? <br>
- Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
- Iure id exercitationem nulla qui repellat laborum vitae, <br>
- molestias tempora velit natus. Quas, assumenda nisi. <br>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
+ Iure id exercitationem nulla qui repellat laborum vitae, <br />
+ molestias tempora velit natus. Quas, assumenda nisi. <br />
+ Quisquam enim qui iure, consequatur velit sit? <br />
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
+ Iure id exercitationem nulla qui repellat laborum vitae, <br />
+ molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit?
</div>
</div>
@@ -493,11 +484,7 @@ li:not(:last-child) {
padding: 15px;
line-height: 1.2;
}
-
Demo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
Explanation
position: relative on the parent establishes a Cartesian positioning context for pseudo-elements.
::after defines a pseudo element.
background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
width: 240px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
height: 25px is the height of the fading gradient pseudo-element, which should be kept relatively small.
bottom: 0 positions the pseudo-element at the bottom of the parent.
pointer-events: none specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
Explanation
position: relative on the parent establishes a Cartesian positioning context for pseudo-elements.
::after defines a pseudo element.
background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
width: 240px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
height: 25px is the height of the fading gradient pseudo-element, which should be kept relatively small.
bottom: 0 positions the pseudo-element at the bottom of the parent.
pointer-events: none specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
position: relative on the reference parent establishes a Cartesian positioning context for its child.
position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.
left: 100% moves the the popout menu 100% of its parent's width from the left.
visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none).
.reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.
.reference:focus > .popout-menu means that when .reference is focused, the popout would be shown.
.reference:focus-within > .popout-menu ensures that the popout is shown when the focus is within the reference.
Browser support
99+%
✅ No caveats.
Pretty text underlinevisual
A nicer alternative to text-decoration: underline or <u></u> where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.
HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
+
Demo
Popout menu
Explanation
position: relative on the reference parent establishes a Cartesian positioning context for its child.
position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.
left: 100% moves the the popout menu 100% of its parent's width from the left.
visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none).
.reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.
.reference:focus > .popout-menu means that when .reference is focused, the popout would be shown.
.reference:focus-within > .popout-menu ensures that the popout is shown when the focus is within the reference.
Browser support
99+%
✅ No caveats.
Pretty text underlinevisual
A nicer alternative to text-decoration: underline or <u></u> where descenders do not clip the underline. Natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.
HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
Pretty text underline without clipping descending letters.
Explanation
text-shadow uses 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger px size. Additional values can create an even thicker shadow, and subpixel values can also be used.
background-image: linear-gradient(...) creates a 90deg gradient using the text color (currentColor).
The background-* properties size the gradient as 100% of the width of the block and 1px in height at the bottom and disables repetition, which creates a 1px underline beneath the text.
The ::selection pseudo selector rule ensures the text shadow does not interfere with text selection.
Resets all styles to default values with one property. This will not affect direction and unicode-bidi properties.
HTML
<div class="reset-all-styles">
<h5>Title</h5>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui
+ repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui
+ iure, consequatur velit sit?
+ </p>
</div>
CSS
.reset-all-styles {
all: initial;
}
-
Demo
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
Explanation
The all property allows you to reset all styles (inherited or not) to default values.
Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.
HTML
<div class="shape-separator"></div>
+
Demo
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
Explanation
The all property allows you to reset all styles (inherited or not) to default values.
position: relative on the element establishes a Cartesian positioning context for pseudo elements.
::after defines a pseudo element.
background-image: url(...) adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use the URL-encoder for SVG.
position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
width: 100% ensures the element stretches the entire width of its parent.
height: 12px is the same height as the shape.
bottom: 0 positions the pseudo element at the bottom of the parent.
The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
-apple-system is San Francisco, used on iOS and macOS (not Chrome however)
BlinkMacSystemFont is San Francisco, used on macOS Chrome
Segoe UI is used on Windows 10
Roboto is used on Android
Oxygen-Sans is used on GNU+Linux
Ubuntu is used on Linux
"Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has a space)
Arial is a font widely supported by all operating systems
sans-serif is the fallback sans-serif font if none of the other fonts are supported
The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
-apple-system is San Francisco, used on iOS and macOS (not Chrome however)
BlinkMacSystemFont is San Francisco, used on macOS Chrome
Segoe UI is used on Windows 10
Roboto is used on Android
Oxygen-Sans is used on GNU+Linux
Ubuntu is used on Linux
"Helvetica Neue" and Helvetica is used on macOS 10.10 and below (wrapped in quotes because it has a space)
Arial is a font widely supported by all operating systems
sans-serif is the fallback sans-serif font if none of the other fonts are supported
This effect is styling only the <label> element to look like a toggle switch, and hiding the actual <input> checkbox by positioning it offscreen. When clicking the label associated with the <input> element, it sets the <input> checkbox into the :checked state.
The for attribute associates the <label> with the appropriate <input> checkbox element by its id.
.switch::after defines a pseudo-element for the <label> to create the circular knob.
input[type='checkbox']:checked + .switch::after targets the <label>'s pseudo-element's style when the checkbox is checked.
transform: translateX(20px) moves the pseudo-element (knob) 20px to the right when the checkbox is checked.
background-color: #7983ff; sets the background-color of the switch to a different color when the checkbox is checked.
.offscreen moves the <input> checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.
transition: all 0.3s specifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the <label>'s background-color and the pseudo-element's transform property when the checkbox is checked.
Vertically and horizontally centers a child element within its parent element using position: absolute and transform: translate() (as an alternative to flexbox or display: table). Similar to flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.
This effect is styling only the <label> element to look like a toggle switch, and hiding the actual <input> checkbox by positioning it offscreen. When clicking the label associated with the <input> element, it sets the <input> checkbox into the :checked state.
The for attribute associates the <label> with the appropriate <input> checkbox element by its id.
.switch::after defines a pseudo-element for the <label> to create the circular knob.
input[type='checkbox']:checked + .switch::after targets the <label>'s pseudo-element's style when the checkbox is checked.
transform: translateX(20px) moves the pseudo-element (knob) 20px to the right when the checkbox is checked.
background-color: #7983ff; sets the background-color of the switch to a different color when the checkbox is checked.
.offscreen moves the <input> checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.
transition: all 0.3s specifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the <label>'s background-color and the pseudo-element's transform property when the checkbox is checked.
Vertically and horizontally centers a child element within its parent element using position: absolute and transform: translate() (as an alternative to flexbox or display: table). Similar to flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.
Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
HTML
<div class="custom-scrollbar">
<p>
- Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
- Iure id exercitationem nulla qui repellat laborum vitae, <br>
- molestias tempora velit natus. Quas, assumenda nisi. <br>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
+ Iure id exercitationem nulla qui repellat laborum vitae, <br />
+ molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit?
</p>
</div>
@@ -719,9 +719,7 @@ in any specification.
Display table centeringlayout
Vertically and horizontally centers a child element within its parent element using display: table (as an alternative to flexbox).