CSS - cue-after Property

Quiz

The cue-after Property

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

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

Syntax

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

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

Property Values

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

Using cue-after Property Adding Audio After Speech

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

Example

In this example, we have used the cue-after property on the p tag. So, after 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-after Example</title>
    <style>
        .example {
            cue-after: url("https://samplelib.com/lib/preview/mp3/sample-3s.mp3");
            speak: normal; 
        }
    </style>
</head>
<body>
    <h1>Tutorials Point</h1>
    <p class="example">CSS cue-after 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 after reading aloud the p element.

Using cue-after Property Disabling Audio after Speech

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

Example

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

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

Supported Browsers

Property
cue-after	Not Supported	Not Supported	Not Supported	Not Supported	Not Supported

Print Page