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
CSS pause-after property
The CSS pause-after property specifies a pause to be observed after speaking an element's content in speech synthesis. This property is part of CSS Speech Module and is used by screen readers and other speech synthesis applications.
Syntax
selector {
pause-after: value;
}
Possible Values
| Value | Description |
|---|---|
time |
Expresses the pause in absolute time units (seconds and milliseconds) |
percentage |
Refers to the inverse of the value of the speech-rate property |
none |
No pause after the element |
x-weak |
Very short pause |
weak |
Short pause |
medium |
Medium pause (default) |
strong |
Long pause |
x-strong |
Very long pause |
Example: Using Time Values
The following example sets different pause durations after headings using time values −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
pause-after: 2s;
color: #333;
}
h2 {
pause-after: 1.5s;
color: #666;
}
p {
pause-after: 500ms;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph will have a 500ms pause after it when read by screen readers.</p>
<h2>Sub Heading</h2>
<p>Another paragraph with pause after content.</p>
</body>
</html>
The page displays headings and paragraphs with normal visual appearance. Screen readers will pause for 2 seconds after the main heading, 1.5 seconds after sub-headings, and 500 milliseconds after paragraphs.
Example: Using Percentage Values
This example demonstrates percentage−based pauses that depend on the speech rate −
<!DOCTYPE html>
<html>
<head>
<style>
.speech-content {
speech-rate: 120;
}
.short-pause {
pause-after: 20%;
}
.long-pause {
pause-after: 100%;
}
</style>
</head>
<body>
<div class="speech-content">
<p class="short-pause">This has a 20% pause after.</p>
<p class="long-pause">This has a 100% pause after.</p>
</div>
</body>
</html>
With a speech rate of 120 words per minute, the first paragraph will have a short pause (about 100ms) and the second will have a longer pause (about 500ms) when read by screen readers.
Browser Support
The pause-after property has limited browser support and is primarily used by assistive technologies like screen readers rather than visual browsers.
Conclusion
The pause-after property controls speech pauses for accessibility. Use time values for precise control or percentages for pauses relative to speech rate, helping create more natural speech patterns for screen reader users.
106 Views
