Control Panel
Platform
Website Builder
Turbo CSS
Pricing
Blog
Log in
Sign up
Fundamentals
Utilities
Selectors
Download
License
Turbo vs Tailwind
Turbo Playground
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
Tags
Tags
Before
Syntax
Class
Properties
{...}
before:
{...}
{...}
:before
{...}
{ content: '';
}
before:
hover:before:
<div class="t1 before:block before:w-50 before:h-4 before:bg-c-red"> There is a line above me. </div>
Specification test cases
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: ""; }