CODEWITHSUNDEEP
htmlcss
HexenSage
HexenSage

Reputation: 137

border-radius: 50%; does NOT make a circle

The blue circle surrounding number "1" in ol.circle > li::before class is not a circle at all. Why? Here's the JSFiddle.

Don't pay attention to colored borders - they are only to control visually that all objects are vertically centered.

.meaning {
  color: #1f2c60;
  font-weight: 700;
  font-size: calc(0.5em + 2.3vw);
  border: 1px solid red;
}

ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 2.7em;
  border: 1px solid green;
}

li {
  line-height: calc(0.5em + 2.3vw);
  counter-increment: item;
  border: 1px solid blue;
}

ol.circle > li::before {
  transform: translateX(-150%);
  content: counter(item);
  display: inline-flex;
  border-radius: 50%;
  justify-content: center;
  background: #1f2c60;
  color: white;
  border: 1px solid purple;
 }
<div class="meaning">
<ol class="circle">
<li>THIS is my text</li>
</ol>
</div>

Upvotes: 3

Views: 7527

Answers (1)

Jesper Martinez
Jesper Martinez

Reputation: 631

Well, To make it a circle. You have to put the same value of height and width

e.g.

.meaning {
  color: #1f2c60;
  font-weight: 700;
  font-size: calc(0.5em + 2.3vw);
  border: 1px solid red;
}

ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 2.7em;
  border: 1px solid green;
}

li {
  line-height: calc(0.5em + 2.3vw);
  counter-increment: item;
  border: 1px solid blue;
}

ol.circle > li::before {
  transform: translateX(-150%);
  content: counter(item);
  display: inline-flex;
  border-radius: 50%;
  justify-content: center;
  background: #1f2c60;
  color: white;
  border: 1px solid purple;
  height:30px;
  width:30px;
 }
<div class="meaning">
<ol class="circle">
<li>THIS is my text</li>
</ol>
</div>

UPDATED ANSWER

How about this? I have added padding: 4px 0 4px 2.7em; to your ol.circle eleent. 

.meaning {
  color: #1f2c60;
  font-weight: 700;
  font-size: calc(0.5em + 2.3vw);
  border: 1px solid red;
}

ol.circle {
  position: relative;
  list-style-type: none;
  /* padding-left: 2.7em; */
  padding: 4px 0 4px 2.7em;
  border: 1px solid green;
}

li {
  line-height: calc(0.5em + 2.3vw);
  counter-increment: item;
  border: 1px solid blue;
}

ol.circle > li::before {
  position: absolute;
  transform: translateX(-150%);
  content: counter(item);
  display: inline-flex;
  border-radius: 50%;
  justify-content: center;
  background: olive; /* #1f2c60 */
  color: white;
  border: 1px solid purple;
  width: calc(0.5em + 2.3vw - 2px);     /* CIRCLE BOTTOM TOUCHES GREEN BORDER WITHOUT "-2px" */
  height: calc(0.5em + 2.3vw - 2px);    /* CIRCLE BOTTOM TOUCHES GREEN BORDER WITHOUT "-2px" */ 
 }
<div class="meaning">
  <ol class="circle">
      <li>THIS is my text</li>
  </ol>
</div>

Upvotes: 2

Related Questions