CSS cue Property Last Updated : 20 Nov, 2020 Improve Improve Like Article Like Save Share Report It is a shorthand version for both cue-before and cue-after property. It specifies that an auditory icon played before or after the element to distinguish and set the element. Syntax: cue: <cue-before> <cue-after>? Property Values: CSS cue-before: It is used to define an auditory icon played before the element to distinguish and set the element. Syntax: cue-before: url|none; Example: <!DOCTYPE html> <html> <head> <style> .gfg { cue-before: url("bell.wav"); } </style> </head> <body style="text-align: center;"> <h1 style="color: green;">GeeksforGeeks</h1> <p class="gfg">CSS cue-before Property</p> <audio controls> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190625153922/frog.mp3" type="audio/mp3"> </audio> </body> </html> Output: CSS cue-after: It is used to define an auditory icon played after the element to distinguish and set the element. Syntax: cue-after: url | none ; Example: <!DOCTYPE html> <html> <head> <style> .gfg { cue-after: url("bell.wav"); } </style> </head> <body style="text-align: center;"> <h1 style="color: green;">GeeksforGeeks</h1> <p class="gfg">CSS cue-after Property</p> <audio controls> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190625153922/frog.mp3" type="audio/mp3"> </audio> </body> </html> Output: Like Article Suggest improvement Previous CSS grid-auto-flow Property Next script.aculo.us Drag & Drop hoverclass Option Share your thoughts in the comments Add Your Comment Please Login to comment...