CSS - cue-before Property

Quiz

The cue-before Property

The CSS cue-before property is used to play audio before reading the text of any HTML element. This property was used if you wanted to add any alert or notification before the screen reader could read the text of the HTML element. The cue-before property was designed for voice-assisted browsers and screen readers.

Note: The cue-before property is now deprecated. It is no longer supported in modern browsers.

Syntax

The syntax for the CSS cue-before property is as follows:

cue-before: url() | none | inherit;

Property Values

Value	Description
none	It disables the audio cue which means, no sound or audio will be played before the text is spoken.
url()	It specifies the URL of the audio file that we want to play before the element is spoken.
inherit	The element inherits the cue-before property from its parent.

Adding Audio Before Speech in CSS

To add audio before screen readers can read the text, we use url() with cue-before property.

Example

In this example, we have used the cue-before property on the p tag. So, before reading aloud the text of the paragraph element, an audio will be played which is specified in url().

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS cue-before Example</title>
    <style>
        .example {
            cue-before: url("https://samplelib.com/lib/preview/mp3/sample-3s.mp3");
            speak: normal; 
        }
    </style>
</head>
<body>
    <h1>Tutorials Point</h1>
    <p class="example">CSS cue-before Property</p>
</body>
</html>

Note: The above code will not work as it should work as the property is now deprecated. So, no audio will be played before reading aloud the p element.

Disabling Audio Before Speech in CSS

You can use none value with the cue-before property to disable the audio before reading the text of the paragraph element.

Example

In this example, we have disabled the audio applied on the p element. So, no audio will be played before reading aloud the text of the p element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS cue-before Example</title>
    <style>
        .example {
            cue-before: none;
            speak: normal; 
        }
    </style>
</head>
<body>
    <h1>Tutorials Point</h1>
    <p class="example">CSS cue-before Property</p>
</body>
</html>

Supported Browsers

Property
cue-before	Not Supported	Not Supported	Not Supported	Not Supported	Not Supported

Print Page