Combinators

Child Next sibling After sibling Descendant Self

Viewport

Viewport width

Device

Device type Hoverable

DOM Structure

Empty Not empty Even Odd First Not first Last Not last

Interaction

Hover Focus Active Visited

State

Valid Invalid Enabled Disabled Checked Unchecked Mode

Pseudo elements

Placeholder Selection Before After Thumb

Before

Syntax

Class

Properties

{...}before:{...}

{...}:before{...} { content: '';
}

<div class="t1 before:block before:w-50 before:h-4 before:bg-c-red"> There is a line above me. </div>

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.

Add a horizontal line at the top within the element.

t1 before:bt-1 before:block

.t1.before\:block:before { display: block; content: ""; } .t1.before\:bt-1:before { border-top-width: 1px; content: ""; }