In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > pause-before

pause-before property

Browser support:

Specifies that the browser should insert a pause before speaking the element's content.

With the pause-before and pause-after properties you can specify pauses before and after speaking the element's content.

The pause, pause-before and pause-after properties are similar to the rest, rest-before and rest-after properties. The only difference, when a sound file needs to play before or after the element (cue, cue-before and cue-after properties). In that case, the pause-before property specifies the pause immediately before and the rest-before property specifies the pause immediately after playing the sound file that belongs to the cue-before property. Similarly, the rest-after property specifies the pause immediately before and the pause-after property specifies the pause immediately after playing the sound file that belongs to the cue-after property.

Note: Unfortunately, the pause-before and rest-after properties currently do not work for sound files in Opera, and the pause, pause-before, pause-after and rest, rest-before, rest-after properties have some other bugs (do not work for several valid time values).

JavaScript page for this property: pauseBefore. You can find other example(s) there.

Possible values:

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

pause in percentage

The pause is calculated from the speech-rate property. The speech-rate defines how much time a word takes, the pause is the percentage of this value.

time(s|ms)

Integer, followed by a time unit (s,ms). The pause in absolute time.

Default: 0.

Example HTML code 1:

This example illustrates the use of the pause-before property:

<head>
    <style>
        .pause {
            pause-before: 5s;
            pause-after: 3s;
        }
    </style>
</head>
<body>
    Select all text on the page (CTRL+A), click with the right mouse button on the selected text and select the speak menu item in the popup context menu.
    <br /><br />
    Five seconds pause before speaking the header element.
    <h2 class="pause">Header element</h2>
    There was three seconds pause after speaking the header element.
</body>