Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS pause property
The CSS pause property is a shorthand for setting pause-before and pause-after properties in speech synthesis. It defines the pause duration before and after an element when the content is read aloud by screen readers or speech synthesizers.
Syntax
selector {
pause: time;
/* or */
pause: pause-before pause-after;
}
Possible Values
| Value | Description |
|---|---|
time |
Specifies the pause duration in seconds (s) or milliseconds (ms) |
pause-before pause-after |
Two values: first for pause before, second for pause after |
Example: Setting Pause Duration
The following example demonstrates different pause settings for headings −
<!DOCTYPE html>
<html>
<head>
<style>
/* pause-before: 20ms; pause-after: 20ms */
h1 {
pause: 20ms;
color: #333;
}
/* pause-before: 30ms; pause-after: 40ms */
h2 {
pause: 30ms 40ms;
color: #666;
}
/* Only pause-after: 10ms */
h3 {
pause-after: 10ms;
color: #999;
}
</style>
</head>
<body>
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<p>This content will be read with the specified pauses when using speech synthesis.</p>
</body>
</html>
The headings display on the page with different colors. When read by a screen reader or speech synthesizer, there will be a 20ms pause before and after the h1, a 30ms pause before and 40ms pause after the h2, and a 10ms pause after the h3.
Browser Support
The pause property is part of CSS Speech Module and is primarily supported by assistive technologies rather than visual browsers.
Conclusion
The pause property enhances accessibility by controlling speech timing. Use single values for equal pauses or two values for different before/after durations.
Updated on: 2026-03-15T11:43:41+05:30
195 Views
Advertisements