--> Skip to main content

Featured

Steps to Create a Project on GitHub

Steps to create a project on GitHub:  1.   Start a repo on GitHub 2.   Make a README.md file 3.   Open vs code – new folder – new terminal – git clone http:…. (from the repo). 4.   In terminal – cd theprojectname   à move into the project file 5.   Ls -la is for showing hidden file à not working for me ???? 6.   Make some changes to README file, in terminal git status à shows all the changes on the file 7.   To add all changes update to the folder à git add . (the dot . means all changes to be added) 8.   Add a new file index.html, in terminal à git commit -m “title of commit” -m “description of commit” 9.   Then git push origin master 10.                 ****Initial a repo in local text editor à git init 11.                 After use git add . etc, when pus...
Read more
Labels

CSS styling -- Place an auto increment counter for a list - Center Pseudo Elements Using Absolute Position

For this demonstration, I created a list, add an auto-incremented number in front of each line using ::before pseudo class, position the numbers so that it can align with each row using absolute position. For centering the numbers, a specific top and transform properties need to be defined. 




Let's check out the code. 
index.html file:
<div>
  <ol>
    <li>How to do?</li>
    <li>When to do?</li>
    <li>Where to go?</li>
  </ol>
</div>

The scss styling is like this: 
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div{
  width:400px;
  background-color:green;
  margin: 50px auto;
  padding:10px;
  ol {
    color:white;    
    list-style:none;
    padding-left:50px;
    li {
      position:relative;
      border-bottom:1px solid #333;  
//       counter-increment has to be in <li> not <ol>, in <ol> the counter will be 1 only, no incrementing...
      counter-increment:mycounter;
    }
    li::before {
      content:counter(mycounter);
      color: red;
      font-family:sans-serif;
      // font-weight:bold;
      font-size: 1.2rem;
      position: absolute;
      top: 50%;
      transform: translatey(-50%);
      left: -30px;
    }
  }
}

I named my counter as 'mycounter' and set it as the 'content' for the ::before pseudo class; the counter-increment property has to be inside li tag for the incrementing to work.
To center the numbers, top is 50% as well as transform:translateY(-50%) to be set. To move the numbers ahead of the row, use negative left value.

To view the codepen:

See the Pen Center psuedo elements by Susan G (@Koo8) on CodePen.

Labels:

Popular Posts