Выделите жирным шрифтом округлые и цветные перечисленные элементы, используя HTML и CSS - PullRequest
Новая
       13

Выделите жирным шрифтом округлые и цветные перечисленные элементы, используя HTML и CSS

0 голосов
/ 17 октября 2018

Я хочу, чтобы мой упорядоченный список был выделен жирным шрифтом, округлен и окрашен

Я использую следующие строки кода 

<html>
<ol>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>

</ol>

Я хочу, чтобы жирные и округлые цифрыследующий вывод

1.list1

2.list2

3.list3

как этого добиться?как на прикрепленном изображении s

Ответы [ 5 ]

0 голосов
/ 17 октября 2018 

 ol {
       list-style: none;
       counter-reset: item;
     }
     li {
       counter-increment: item;
       margin-bottom: 5px;
     }
     li:before {
       margin-right: 10px;
       content: counter(item);
       background: lightgreen;
       border-radius: 100%;
       color: white;
       width: 1.2em;
       text-align: center;
       display: inline-block;
     }
    <ol>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>

    </ol>
0 голосов
/ 17 октября 2018

Вы также можете использовать Flex свойство. 

ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

ol li {
  display: flex;
  counter-increment: myNumber;
  margin: 1rem 0.25rem;
  line-height: 40px;
  padding-left: 3rem;
}

ol li:before {
  display: flex;
  justify-content: center;
  content: counter(myNumber);
  width: 40px;
  height: 40px;
  background: #6FB45D;
  border-radius: 25px;
  color: white;
  font-size: 24px;
  font-weight: 700;
}
<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper elit eu ex viverra imperdiet. Aliquam erat volutpat. Sed at tincidunt ligula. Proin gravida egestas urna quis placerat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper elit eu ex viverra imperdiet. Aliquam erat volutpat. Sed at tincidunt ligula. Proin gravida egestas urna quis placerat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper elit eu ex viverra imperdiet. Aliquam erat volutpat. Sed at tincidunt ligula. Proin gravida egestas urna quis placerat.</li>

</ol>
0 голосов
/ 17 октября 2018

Ну, я сделал ручку для ваших нужд, вы можете посмотреть ее здесь 

https://codepen.io/kathir-magaesh/pen/MPQKgQ


ol {
    list-style-type: none;
}

ol>li::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    height: 2em;
    width: 2em;
    content: counter(customlistcounter) " ";
    border: 2px solid #green;
    border-radius: 69%;
    color: #fff;
    float: left;
    font-size: .75rem;
    line-height: calc(2em - 4px);
    overflow: hidden;
    text-align: center;
    background:green;
}

ol>li {
    counter-increment: customlistcounter;
    clear: both;
    padding: .75em 0 .75em 2em;
    position: relative;
    z-index: 1;
}
<ol>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>Installing</li>
<li>Creating a new application.</li>
<li>Defining a route.</li>
<li>Writing a UI component.</li>
<li>Building your app to be deployed to production.</li>
</ol>
0 голосов
/ 17 октября 2018

Попробуйте это: 

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: my-awesome-counter;
  width: 300px;
}

ol li {
  counter-increment: my-awesome-counter;
  margin: 1rem 0.25rem;
  line-height: normal;
  padding-left: 60px;
  position: relative;
}

ol li span {
  display: block;
}

ol li span:first-child {
  font-weight: bold;
  color: #6FB45D;
}

ol li::before {
  display: inline-block;
  content: counter(my-awesome-counter);
  width: 44px;
  height: 40px;
  line-height: 40px;
  background: #6FB45D;
  border-radius: 25px;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 24px;
  font-weight: 700;
  position: absolute;
  left: 0;
}
<ol>
  <li>
    <span>Customer Bonus</span>
    <span>Earn 50% of the CV on all off you (Also, 20% of the CV you will go into.)</span>
  </li>
</ol>
0 голосов
/ 17 октября 2018

Для начала, вы можете попробовать следующее: 

ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

ol li {
  counter-increment: my-awesome-counter;
  margin: 1rem 0.25rem;
  line-height: 40px;
  padding-left: 3rem;
}

ol li::before {
  display: inline-block;
  content: counter(my-awesome-counter);
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #6FB45D;
  border-radius: 25px;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 24px;
  font-weight: 700;
  margin-left: -3rem;
}
<ol>
  <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
  <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
  <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>

</ol>

Подробнее о счетчиках читайте здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

...