Skip to content
Related Articles

Related Articles

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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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

    chevron_right

    
    

    Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :