content-none
Sets the content property to none, removing generated pseudo-element content.
CSS Rules
.content-none {
content: none;
}
Usage
<element class="content-none" />
Responsive
Prefix
.content-none
utility with a breakpoint variant (e.g., md:) to apply styles at
specific screen sizes (Supported breakpoints are
xm through 2xl).
<element class="md:content-none" />
States
States are generated dynamically at runtime and always
come last. Append a state like :hover or
:focus to the end of the
class. This works in conjunction with breakpoints
.
Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.
<element class="content-none:hover" />
Group Hover Example
The :group-hover state
applies styles when a parent element with the .group class is hovered.
<element class="group">
<element class="content-none:group-hover">...</element>
</element>
Pseudo-Elements
The ::before and ::after utility classes
are supported too. Granted that you add the mandatory content-before or content-after class in
order for them to work.
<element class="content-before content-none::before" />
<element class="content-after content-none::after" />