amitabhaghosh197
8/6/2014 - 11:15 AM

Text Styling in <li> elements , specially in 2nd line of text when <li> has a list style icon

Text Styling in

  • elements , specially in 2nd line of text when
  • has a list style icon
  • <style>
    	
    .activities-content
    
    {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	display: table;
    	
    	
    	
    	}
    	
    
    .activities-content > li
    
    {
      width: 100%;
      display: table-row;
     	
    	}
    	
    
    .activities-content > li:before
    {
    	 font-family: 'FontAwesome';
    	 content: "\f111";
    	display: table-cell;
    	width: 18px;
    	color: #4bca32;
    	font-size: 9px;
    	
    	}
    	
    .activities-content > li:after
     
     {
    	 content: '';
    	 position: relative;
    	 height: 20px;
    	 display: block;
    	 
    	 
    	 }
    
    .activities-content > li > a
    {
    	color: #737373;
    	font-size:13px;
    	line-height: 18px;
    	
    
    }	
    	
    </style>
    
    
    <body>
    <ul class="activities-content">
                                           <li><a href="">Speech and Language Therapy MSc.
                                           Temporibus autem quibusdam et aut officiis debitis aut rerum .
    
                                           </a></li>
                                           
                                           <li><a href="">Speech and Language Therapy PgDip. Temporibus autem quibusdam et aut officiis debitis aut rerum .
                                           
                                           </a></li>
                                           <li><a href="">Phonological Awareness: The Building Blocks. Success – 2 hours.</a></li>
                                           <li><a href="">Phonological Awareness: The Building Blocks. Success – 2 hours.</a></li>
                                          </ul>	
    	
    </body>
    Sometimes while writing text in <li> elements in 2 line when <li> element has an icon before, it is seen that the 1st text line keeps the distance from the icon properly but the 2nd line starts from beneath the icon. So to clear all these and make it a fresh one follow the following files.
    
    Only the thing:
    1. ul style : display: table;
    2. ul li style: display: table-row;
    
    3. ul li:before : display: table-cell;
    
    4. Add li:after style to have the proper margin from one li to another li
    
    5. Resource : http://stackoverflow.com/questions/10428720/how-to-keep-indent-for-second-line-in-ordered-lists-via-css