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

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

cue-before property

Browser support:

Specifies the sound file to play before an element.

With the cue-before and cue-after properties you can specify sound files to play before and after an element.

If you want a pause before or after playing sound files, use the pause, pause-before, pause-after and rest, rest-before, rest-after properties.

Use the pause-before property for a pause immediately before, and the rest-before property for a pause immediately after playing the sound file specified with the cue-before property.

Similarly, use the rest-after property for a pause immediately before, and the pause-after property for a pause immediately after playing the sound file specified with 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: cueBefore. You can find other example(s) there.

Possible values:

One of the following values:

url(URI)

Where URI specifies the location of the sound file.

inherit

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

none

No sound file is specified.

Default: none.

Example HTML code 1:

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

<head>
    <style>
        .voice {
            cue-before: url("budgie.wav");
            cue-after: url("bell.wav");
        }
    </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.
    <span class="voice">
        The budgie.wav sound file has been played before this sentence. 
        The bell.wav sound file will be played after this sentence.
    </span>
    This is the last sentence.
</body>