CSS - PSEUDOELEMENTS / CLASSES

    // PSEUDOELEMENTS
    p::first-letter {color: #ff0000;}
    p::first-line { font-variant: small-caps;}
    ::marker {color: red; font-size: 23px;} /*For lists*/
    ::selection

    // PSEUDOELEMENTS BEFORE AND AFTER
    /* para introducir elementos no indexados, texto o lineas, fondo de color*/
    p::before
    p::after
    They need the value content:""; to be displayed
    p.example::before {
        display: block;
        content: 'before';
        color: yellow;
        background-color: grey;
        width: 25px;
        height: 25px;
    }
    <div data-text="Hi" class="box2"></div>
    .box2::before{
        display: block;
        content: attr(data-text);
        color: yellow;
        background-color: grey;
        width: 25px;
        height: 25px;
      
      }

    data-xxxxxx="mensaje enviado"
    content: attr('data-xxxx');

    // PSEUDOCLASSES
    :hover  
    :active
    :focus 
    :visited
    :link
    :required
    :disabled
    :checked
    :not(p)
    :root

    :first-child
    :last-child
    :last-of-type
    :nth-child(n); 	p:nth-child(2);  Selects every p element that is the second child of its parent
    :nth-last-child(n) same but from the end
    :nth-of-type(n) Selects every p element that is the second p element of its parent
    :nth-last-of-type(n)  same but from the end
    :only-of-type Selects every p element that is the only p element of its parent
    :only-child Selects every p that is the only child of its parent

    // PSEUDOCLASSES
    :hover  /*Subtle effects*/
    :focus /*For outline better. outline: 2px solid var(--color); outline-offset: 5px;  Not so subtle as hover */
    button:focus{box-shadow: 0 0 0 10px rgba(0,0,0,.15);} //cannot set outline in Buttons
    Mozilla ::moz-focus-inner{border:0;} /*To eliminate inner outline in Mozilla*/
    button:focus{
        box-shadow: 
        0 0 0 5px white,
        0 0 0 10px var(--color);
        ;
    }