Skip to content
Related Articles

Related Articles

Improve Article
CSS cue Property
  • Last Updated : 20 Nov, 2020

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
            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
            type="audio/mp3"
        </audio
    </body
      
    </html

    Output:



My Personal Notes arrow_drop_up
Recommended Articles
Page :