Check out example codes for "make a underline with ::before css". It will help you in understanding the concepts better.

Code Example 1

.underline {
       text-decoration: none; 
       position: relative; 

    .underline:after {
        position: absolute;
        content: '';
        height: 2px;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom: -4px; 

       optional values below 
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		  left: 0;
        right: 0;
		  width: 50%;
		  background: green;
		  /* optional animation */

	 /* optional hover classes used with anmiation */
	  .underline:hover:after {
		  width: 80%;
		  background: orange;

Learn ReactJs, React Native from