Search code examples
htmlcssmaterialize

Vertical align colon on list of text

I'm doing a website project, with using a Materialize Framework.

There is a line of text where i would like to align all of the colon vertically. this is the example of the text:

Project:Intimate House  
Location : Pulau Putri, Puri - West Jakarta - Indonesia  
Site Area : 160 sqm  
Building Area : 210 sqm  
Design Phase : 2016 
Construction Period : April 2016 - July 2017

and this is the result of the vertically aligned colon that i want

Project                : Intimate House  
Location               : Pulau Putri, Puri - West Jakarta - Indonesia  
Site Area              : 160 sqm  
Building Area          : 210 sqm  
Design Phase           : 2016 
Construction Period    : April 2016 - July 2017

Below is my code that i try to create(https://codepen.io/bukuchaga/pen/xJNdeq) HTML: 

                    <h4><b>Intimate House</b><br></h4>
                    <ul>
                      <li><b>Project:</b>Intimate House</li>
                      <li><b>Location       :</b> Pulau Putri, Puri - West Jakarta - Indonesia</li>
                      <li><b>Site Area      :</b> 160 sqm</li>
                      <li><b>Building Area  :</b> 210 sqm</li>
                      <li><b>Design Phase   :</b> 2016</li>
                      <li><b>Construction Period :</b> April 2016 -  July 2017</li>
                    </ul>

Based on my research before, i found a question that maybe similar to my question.(Vertical align colon with numbers)

The problem is after i tried to apply the answer, it's still not working on my code, rather it turns my line of text became out of place from how it should be and i have tried several others method and still not working.

Thank you before.

Solution

  • I would suggest removing the colon from the HTML and using a ::after pseudo element instead.

    .alignMe b {
  display: inline-block;
  width: 50%;
  position: relative;
  padding-right: 10px; /* Ensures colon does not overlay the text */
}

.alignMe b::after {
  content: ":";
  position: absolute;
  right: 10px;
}
    <ul class="alignMe">
  <li><b>Project</b> Intimate House</li>
  <li><b>Location</b> Pulau Putri, Puri - West Jakarta - Indonesia</li>
  <li><b>Site Area</b> 160 sqm</li>
  <li><b>Building Area</b> 210 sqm</li>
  <li><b>Design Phase</b> 2016</li>
  <li><b>Construction Period</b> April 2016 - July 2017</li>
</ul>