::before

Single-File, Classless, Themeable CSS for Semantic HTML

Philosophy & Principles

A classless, semantic style reset that styles HTML5 elements directly, providing accessible defaults without relying on utility-first CSS libraries or overly complex frameworks. It is themeable (via CSS custom properties) and designed for progressive enhancement, allowing further customization through classes, components, or frameworks when desired. By targeting semantic HTML, it provides a rock-solid, long-term foundation. All components are implemented according to the ARIA Authoring Practices Guide (APG), ensuring they are accessible, predictable, and keyboard-friendly, so your semantic HTML remains usable for everyone.

Getting Started

To get started, simply copy/paste the Before.css file into your project and link to it in the head of your HTML document.

Elements

The following HTML5 elements are styled by Before Style:

a

Anchor element that creates a hyperlink to other pages, files, or locations.

Default Link

A standard hyperlink with underline styling that inherits the current text color.

Code

<a href="#">Click here to learn more</a>

Visited Link

Links that have been visited maintain the current color with slightly reduced opacity.

Code

<a href="/previously-visited-page">Previously visited link</a>

External Link

Links with target="_blank" automatically display an external link indicator (↗).

Code

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example.com</a>

Download Link

Links with the download attribute display a download indicator (↓) before the text.

Code

<a href="/files/document.pdf" download>Download PDF</a>

Email Link

Links with mailto: protocol display an email icon (✉) before the text.

Code

<a href="mailto:hello@example.com">hello@example.com</a>

Phone Link

Links with tel: protocol display a phone icon (📞) before the text.

Code

<a href="tel:+1234567890">+1 (234) 567-890</a>

Disabled Link

Use aria-disabled="true" to visually disable a link while maintaining accessibility.

Code

<a href="#" aria-disabled="true">Unavailable link</a>

Current Page Link

Use aria-current="page" to indicate the current page in navigation. The link appears bold without underline.

Code

<a href="/about" aria-current="page">About</a>

Skip Link

A hidden link that becomes visible on focus, allowing keyboard users to skip to main content.

Code

<a href="#main-content">Skip to main content</a>

abbr

Represents an abbreviation or acronym with an optional title for the full description.

Abbreviation

Dotted underline indicates hover for full text.

Code

<abbr title="Full text">ABBR</abbr>

address

Provides contact information for the nearest article or body ancestor.

Address

Italic contact information block.

Code

<address>Contact info</address>

area

Defines a clickable area inside an image map.

article

Represents a self-contained composition intended for independent distribution or reuse.

Article

Self-contained content block with implicit padding.

Code

<article>
  <h2>Title</h2>
  <p>Content...</p>
</article>

aside

Represents content tangentially related to the main content, often used for sidebars.

Aside

Sidebar or supplementary content with subtle styling.

Code

<aside>
  <!-- supplementary content -->
</aside>

audio

Embeds sound content with controls for playback.

Audio Player

Full-width audio player with native controls.

Code

<audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4
"></audio>

b

Represents text stylistically offset from normal text without conveying extra importance.

Bold

Bold text for stylistic offset.

Code

<b>bold text</b>

bdi

Isolates a span of text that might be formatted in a different direction from surrounding text.

Bidirectional Isolation

Isolates text direction from surrounding content.

Code

<bdi>isolated text</bdi>

bdo

Overrides the current text directionality.

Bidirectional Override

Forces text direction override.

Code

<bdo dir="rtl">text</bdo>

blockquote

Indicates an extended quotation from another source.

Block Quote

Indented with a left border to distinguish quoted content.

Code

<blockquote>
  <p>Quoted text here.</p>
</blockquote>

body

Represents the content of an HTML document.

Default Body

Clean, readable defaults with system fonts, comfortable line height, and responsive max-width for optimal reading.

Code

<body>
  <h1>Page Title</h1>
  <p>Content goes here.</p>
</body>

br

Produces a line break in text.

Line Break

Forces a line break within text.

Code

<br>

canvas

Container for graphics drawn via scripting (usually JavaScript).

Canvas

Drawing surface with responsive sizing.

Code

<canvas width="300" height="150"></canvas>

caption

Specifies the title of a table.

Table Caption

Descriptive title displayed above the table.

Code

<caption>Table title</caption>

cite

Represents the title of a creative work being referenced.

Citation

Italic text for referencing creative works.

Code

<cite>Work Title</cite>

code

Displays a fragment of computer code.

Inline Code

Inline code with subtle background for visibility.

Code

<code>console.log()</code>

Code Block

Wrap code in pre for multi-line code blocks.

Code

<pre><code>function greet(name) {
  return "Hello, " + name;
}</code></pre>

col

Defines a column within a table and is used for styling columns.

colgroup

Groups one or more columns in a table for formatting.

data

Links content with a machine-readable translation.

Data

Machine-readable value with human display.

Code

<data value="123">Display</data>

datalist

Contains a set of option elements representing predefined options for an input.

Datalist

Provides autocomplete options for an input.

Code

<datalist id="list">
  <option value="Option">
</datalist>

dd

Provides the description or value for a term in a description list.

Definition Description

Indented description for a term.

Code

<dd>Description text</dd>

del

Represents text that has been deleted from a document.

Deleted Text

Strikethrough styling to indicate removed content.

Code

<del>deleted text</del>

details

Creates a disclosure widget from which the user can obtain additional information.

Disclosure Widget

Expandable content with toggle control.

Code

<details>
  <summary>Title</summary>
  <p>Content...</p>
</details>

dfn

Indicates the defining instance of a term.

Definition

Italic styling for terms being defined.

Code

<dfn>term</dfn>

div

A generic container for flow content with no semantic meaning.

Div Container

Generic block-level container.

Code

<div>content</div>

dl

Represents a description list of term-description pairs.

Description List

A list of terms and their descriptions, perfect for glossaries or metadata.

Code

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

dt

Specifies a term in a description list.

Definition Term

Bold term in a definition list.

Code

<dt>Term</dt>

em

Marks text with stress emphasis.

Emphasized Text

Italic text for stress emphasis.

Code

<em>emphasized text</em>

embed

Embeds external content from an external application or plugin.

fieldset

Groups related elements within a form.

Form Group

Bordered container for grouping related form fields.

Code

<fieldset>
  <legend>Group Title</legend>
  <!-- form fields -->
</fieldset>

figcaption

Represents a caption or legend for a figure.

Figure Caption

Smaller, muted text for describing figure content.

Code

<figcaption>Caption text</figcaption>

figure

Represents self-contained content with an optional caption.

Figure with Caption

Image container with descriptive caption below.

Code

<figure>
  <img src="image.jpg" alt="Alt">
  <figcaption>Caption</figcaption>
</figure>

form

Represents a section containing interactive controls for submitting information.

Basic Form

A simple form with inputs and a submit button.

Code

<form>
  <label>Name</label>
  <input type="text">
  <button type="submit">Submit</button>
</form>

h1

Represents the highest level section heading.

Page Heading

The main heading of the page. Bold and large for clear hierarchy.

Code

<h1>Main Page Title</h1>

h2

Represents a second-level section heading.

Heading 2

Major section heading at 2rem size.

Code

<h2>Heading Text</h2>

h3

Represents a third-level section heading.

Heading 3

Subsection heading at 1.5rem size.

Code

<h3>Heading Text</h3>

h4

Represents a fourth-level section heading.

Heading 4

Minor heading at 1.25rem size.

Code

<h4>Heading Text</h4>

h5

Represents a fifth-level section heading.

Heading 5

Small heading at 1rem size.

Code

<h5>Heading Text</h5>

h6

Represents the lowest level section heading.

Heading 6

Smallest heading at 0.875rem size.

Code

<h6>Heading Text</h6>

hgroup

Groups a heading with related content such as subheadings.

Heading Group

Groups heading with subtitle, reduced spacing between.

Code

<hgroup>
  <h1>Title</h1>
  <p>Subtitle</p>
</hgroup>

hr

Represents a thematic break between paragraph-level elements.

Horizontal Rule

A subtle line to separate content sections.

Code

<hr>

html

The root element of an HTML document.

i

Represents text in an alternate voice or mood, such as technical terms or foreign phrases.

Italic

Italic text for alternate voice or mood.

Code

<i>italic text</i>

iframe

Embeds another HTML page within the current page.

Iframe

Embedded frame with no border.

Code

<iframe src="url" title="Description"></iframe>

img

Embeds an image into the document.

Image

Responsive image that scales to its container.

Code

<img src="image.jpg" alt="Description">

input

Creates interactive form controls for accepting user data.

Text Input

Standard text input with clean borders and focus state.

Code

<input type="text" placeholder="Enter text...">

Checkbox

Checkbox input using system accent color.

Code

<input type="checkbox">

Radio

Radio button for single selection from a group.

Code

<input type="radio" name="group">

ins

Represents text that has been added to a document.

Inserted Text

Underlined to indicate newly added content.

Code

<ins>inserted text</ins>

kbd

Represents user keyboard input.

Keyboard Key

Styled like a physical keyboard key with border and shadow.

Code

<kbd>Ctrl</kbd>

label

Represents a caption for an item in a user interface.

Form Label

Block-level label with subtle weight.

Code

<label>Field label</label>

legend

Represents a caption for a fieldset.

Fieldset Legend

Caption displayed on fieldset border.

Code

<legend>Group Title</legend>

li

Represents an item in a list.

List Item

Individual list items with comfortable spacing.

Code

<li>List item content</li>

main

Represents the dominant content of the body of a document.

Main Content

Primary content area of the document.

Code

<main>
  <!-- primary content -->
</main>

map

Defines an image map with clickable areas.

mark

Represents text marked or highlighted for reference or notation.

Highlighted Text

Yellow highlight for marking relevant content.

Code

<mark>highlighted text</mark>

meta

Represents metadata that cannot be expressed with other HTML elements.

noscript

Defines content to display when scripts are not supported or disabled.

object

Represents an external resource such as an image, plugin, or nested browsing context.

ol

Represents an ordered list of items.

Basic Ordered List

A numbered list for sequential content.

Code

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

optgroup

Groups related options within a select element.

Option Group

Groups options with a bold label.

Code

<optgroup label="Group">
  <option>Item</option>
</optgroup>

option

Represents an option in a select element or datalist.

Option

Selectable item within a dropdown.

Code

<option value="val">Label</option>

output

Container for the result of a calculation or user action.

Output

Displays calculation results inline.

Code

<output>result</output>

p

Represents a paragraph of text.

Basic Paragraph

Standard paragraph with comfortable line height and spacing.

Code

<p>This is a paragraph of text.</p>

picture

Contains source elements and one img element for responsive images.

Picture

Responsive image container for multiple sources.

Code

<picture>
  <source srcset="https://picsum.photos/seed/button/800/400.webp" type="image/webp">
  <img src="https://picsum.photos/seed/button/400/200" alt="Alt">
</picture>

pre

Represents preformatted text preserving whitespace and line breaks.

Preformatted Text

Preserves whitespace and uses monospace font with subtle background.

Code

<pre>Preformatted text here</pre>

progress

Displays the completion progress of a task.

Progress Bar

Visual progress indicator using the primary color.

Code

<progress value="70" max="100"></progress>

q

Represents a short inline quotation.

Inline Quote

Automatically wrapped with quotation marks.

Code

<q>Quoted text</q>

rp

Provides fallback parentheses for browsers that don't support ruby annotations.

Ruby Parentheses

Fallback parentheses for non-ruby browsers.

Code

<rp>(</rp>

rt

Specifies the ruby text component of a ruby annotation.

Ruby Text

Small annotation text above base character.

Code

<rt>annotation</rt>

ruby

Represents a ruby annotation for showing pronunciation of East Asian characters.

Ruby Annotation

Shows pronunciation above characters.

Code

<ruby>
  字 <rt>pronunciation</rt>
</ruby>

s

Represents text that is no longer accurate or relevant.

Strikethrough

Text with line through indicating outdated content.

Code

<s>old text</s>

samp

Represents sample output from a computer program.

Sample Output

Monospace font for computer output.

Code

<samp>output text</samp>

script

Embeds or references executable JavaScript code.

section

Represents a standalone section of a document.

Section

Thematic grouping of content.

Code

<section>
  <h2>Heading</h2>
  <p>Content...</p>
</section>

select

Represents a control providing a menu of options.

Select Dropdown

Dropdown menu for selecting from predefined options.

Code

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

slot

A placeholder inside a web component for custom markup.

small

Represents side comments or small print.

Small Print

Reduced font size for fine print or disclaimers.

Code

<small>fine print</small>

source

Specifies multiple media resources for picture, audio, or video elements.

span

A generic inline container for phrasing content.

Span

Generic inline container.

Code

<span>inline</span>

strong

Indicates text with strong importance or urgency.

Strong Text

Bold text for emphasis and importance.

Code

<strong>important text</strong>

style

Contains CSS styling information for a document.

sub

Represents subscript text.

Subscript

Text positioned below the baseline.

Code

H<sub>2</sub>O

summary

Specifies a visible heading for a details element.

Summary

Clickable heading that toggles the details content.

Code

<summary>Toggle heading</summary>

sup

Represents superscript text.

Superscript

Text positioned above the baseline.

Code

x<sup>2</sup>

tbody

Groups the body content rows of a table.

Table Body

Container for table body rows.

Code

<tbody>
  <tr><td>Data</td></tr>
</tbody>

td

Represents a data cell in a table.

Table Data Cell

Standard data cell with padding and border.

Code

<td>Cell data</td>

template

Holds HTML content that is not rendered but can be instantiated via JavaScript.

textarea

Represents a multi-line plain text editing control.

Text Area

Multi-line input with resizable height.

Code

<textarea placeholder="Enter text..."></textarea>

tfoot

Groups the footer content rows of a table.

Table Footer

Container for table footer rows, often for totals.

Code

<tfoot>
  <tr><td>Footer</td></tr>
</tfoot>

th

Represents a header cell in a table.

Table Header

Bold header cell with bottom border.

Code

<th>Header</th>

thead

Groups the header content rows of a table.

Table Head

Container for table header rows.

Code

<thead>
  <tr><th>Header</th></tr>
</thead>

time

Represents a specific period in time or a machine-readable datetime.

Time

Machine-readable date/time with human display.

Code

<time datetime="2024-01-15">Jan 15</time>

title

Defines the document title shown in the browser tab.

tr

Represents a row of cells in a table.

Table Row

Horizontal row containing table cells.

Code

<tr><td>Cell</td></tr>

track

Specifies timed text tracks for media elements.

u

Represents text with an unarticulated annotation, such as misspelled words.

Underline

Wavy underline for annotated text like spelling errors.

Code

<u>annotated text</u>

ul

Represents an unordered list of items.

Basic Unordered List

A bullet list with proper spacing and indentation.

Code

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Nested List

Lists can be nested for hierarchical content.

Code

<ul>
  <li>Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

var

Represents the name of a variable in a mathematical or programming context.

Variable

Italic monospace for variable names.

Code

<var>variableName</var>

video

Embeds video content with playback controls.

Video Player

Responsive video with native controls.

Code

<video controls src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
"></video>

wbr

Represents an optional line break opportunity.

Word Break Opportunity

Suggests where a line break may occur.

Code

long<wbr>word

Components

The following ARIA components are styled by Before Style:

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Basic Accordion

A simple accordion using native details/summary elements with exclusive behavior via the name attribute.

Example

What is an accordion?

An accordion is a vertically stacked set of interactive headings that each reveal a section of content.

When should I use an accordion?

Use accordions when you have multiple sections of content that users may want to browse through without leaving the page.

Are accordions accessible?

Yes, when built with native details/summary elements, accordions are keyboard navigable and screen reader friendly.

Code

<div role="region" aria-label="FAQ">
  <details name="accordion-group">
    <summary>Section Title</summary>
    <p>Section content...</p>
  </details>
  <details name="accordion-group">
    <summary>Another Section</summary>
    <p>More content...</p>
  </details>
</div>

Accordion with Default Open

An accordion where one panel starts expanded using the open attribute.

Example

Code

<nav aria-label="Categories">
  <details name="nav-accordion" open>
    <summary>First Section (Open)</summary>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </details>
  <details name="nav-accordion">
    <summary>Second Section</summary>
    <ul>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </details>
</nav>

Nested Accordion

Accordions can be nested to create hierarchical content structures.

Example

Documentation

Getting Started
Installation

Run npm install to get started with the project.

Configuration

Edit the config file to customize your setup.

API Reference
Components

Learn about available component APIs.

Utilities

Explore utility functions and helpers.

Code

<section aria-labelledby="section-title">
  <h3 id="section-title">Section Title</h3>
  <details name="parent-accordion">
    <summary>Parent Item</summary>
    <details>
      <summary>Child Item</summary>
      <p>Nested content...</p>
    </details>
  </details>
</section>

Alert

A live region that displays important, time-sensitive information to the user.

Button

An interactive element that triggers an action when activated by the user.

Checkbox

A form control that allows users to select one or more options from a set.

Combobox

A composite widget combining a text input with a popup listbox for selecting values.

Dialog

A modal or non-modal window that appears above the page content requiring user interaction.

Disclosure

A button that controls the visibility of a section of content.

Feed

A scrollable list of articles where new content may be added as the user scrolls.

Grid

An interactive two-dimensional data structure with rows and columns of cells.

Landmarks

Semantic regions that help assistive technology users navigate and understand page structure.

Listbox

A widget that allows users to select one or more items from a list of choices.

Meter

A graphical display of a numeric value within a known range.

Radio

A group of mutually exclusive options where only one can be selected at a time.

Slider

An input control that allows users to select a value from a range by dragging a thumb.

Spinbutton

A numeric input field with increment and decrement buttons for adjusting values.

Switch

A toggle control that represents an on/off or enabled/disabled state.

Table

A structured grid of data organized in rows and columns for displaying information.

Tabs

A set of layered content panels where only one panel is displayed at a time.

Toolbar

A container for grouping related controls such as buttons and menu items.

Tooltip

A contextual popup that displays descriptive information about an element on hover or focus.

Treeview

A hierarchical list that can have nested groups of items that can be expanded or collapsed.

Treegrid

A grid widget that combines the features of a tree and a data grid.

Window Splitter

A movable divider that separates two sections and allows resizing them.