0

Как реализовать данный выделенный блок? Пробовал дивом но надо еще и одновременный hover с цифрой и нижним border реализовать:

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 1020px;
  margin: auto;
  margin-top: 200px;
}

.block {
  width: 980px;
  border-bottom: 4px solid gray;
}

block::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 6%;
  background-color: gray;
  display: block;
  height: 10px;
  width: 78%;
}

.block p {
  display: inline-block;
  margin-bottom: 30px;
}

.list {
  font-size: 20px;
  background-color: gray;
  padding: 10px;
  border-radius: 50%;
  color: #fff;
}

.promo {
  font-size: 30px;
  padding-right: 140px;
  padding-left: 30px;
}
<div class="container">
  <div class="block">
    <p class="list">1</p>
    <p class="promo">Simple</p>
    <p class="list">2</p>
    <p class="promo">Transparent</p>
    <p class="list">3</p>
    <p class="promo">Collaborative</p>
  </div>
</div>

codepen

введите сюда описание изображения

2
  • 2
    Добавьте пожалуйста код с вашими попытками.
    – user262779
    12 фев 2018 в 8:21
  • Похоже на табы, head tabs - ol > li
    – soledar10
    12 фев 2018 в 10:22

3 ответа 3

1

Пример

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tabs {
  padding: 25px;
}

.tabs__head {
  counter-reset: item;
  font-size: 0;
  border: 1px solid #ccc;
  text-align: center;
}

.tabs__head>li {
  display: inline-block;
  vertical-align: top;
  width: 33.3333%;
  font-size: 15px;
  border-bottom: 3px solid transparent;
}

.tabs__head>li:before {
  counter-increment: item;
  content: counter(item) " ";
  background: #222;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #fff;
  display: inline-block;
  text-align: center;
  margin-right: 7px;
  border-radius: 50%;
}

.tabs__head>li>a {
  display: inline-block;
  color: #222;
  padding: 15px;
}

.tabs__head>li:hover:before,
.tabs__head>li:hover>a {
  opacity: .7;
}

.tabs__head>li.active {
  border-color: green;
}

.tabs__head>li.active:before {
  background: green;
  opacity: 1;
}

.tabs__head>li.active>a {
  color: green;
  opacity: 1;
}

.tabs__content {
  display: none;
  padding: 25px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabs__content:first-of-type {
  display: block;
}
<div class="tabs">
  <ol class="tabs__head">
    <li class="active"><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ol>
  <div class="tabs__contents">
    <div id="tab-1" class="tabs__content">
      Content Tab 1
    </div>
    <div id="tab-2" class="tabs__content">
      Content Tab 2
    </div>
    <div id="tab-3" class="tabs__content">
      Content Tab 3
    </div>
  </div>
</div>

1

Не лучшая моя реализация, но имея под рукой только псевдо-картинку и не имея описание от автора, что именно он хочет, могу только так...
Цвета уважаемый автор добавлены для того, что бы ты имел представление, что где да как....

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 1020px;
  height: 100px;
  margin: auto;
  margin-top: 200px;
  display: flex;
  flex-wrap: nowrap;
}

.block {
  border-bottom: 4px solid gray;
  background: red;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.list {
  margin-left: 25px;
  font-size: 20px;
  background: gray;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 2;
}

.promo {
  font-size: 30px;
  padding-right: 140px;
  padding-left: 30px;
}

.block1 {
  background-color: orange;
}

.block2 {
  background-color: green;
}

.block3 {
  background-color: yellow;
}

.block:hover {
  background-color: cyan;
  border-bottom: 4px solid blue;
}
<div class="container">
  <div class="block block1">
    <p class="list">1</p>
    <p class="promo">Simple</p>
  </div>
  <div class="block block2">
    <p class="list">2</p>
    <p class="promo">Transparent</p>
  </div>
  <div class="block block3">
    <p class="list">3</p>
    <p class="promo">Collaborative</p>
  </div>
</div>
</div>

8
  • Покойся с миром, семантика. 12 фев 2018 в 10:31
  • @SashaOmelchenko, о чем ты?))))
    – Air
    12 фев 2018 в 10:47
  • Я о том, что несмотря на обилие тегов, подходящих очень хорошо для разметки этого блока, ты пользуешься только дивами и параграфами ) 12 фев 2018 в 11:45
  • @SashaOmelchenko, когда я был новичком и задавал вопрос, то мне было зачастую не понятно, когда меня не то что надо было... Ты прав, я там много чего бы изменил... Но это всего то пример... На мой взгляд , лучше показать, то что хотел человек на своем примере.... Тем более, поверь, если бы он хотя бы участвовал в обсуждении, я бы по другому оформил ответ, и много чего хорошего ему посоветовал....
    – Air
    12 фев 2018 в 11:49
  • я хотел сделать блок с нижним border и чтоб при наведении hover выделялось зеленым циферка и отдельный пункт,я начал уже предполагать что это список 12 фев 2018 в 11:58
1

Как то так

.counter{
  margin:0;
  padding:0;
  counter-reset: myCounter;
  display:inline-flex;
  border-bottom:1px solid #ddd;
}
.counter li{
  display:inline-block;
  position:relative;
  top:1px;
  padding:10px 0;
  margin-right:40px;
  border-bottom:inherit;
}
.counter li:last-child{
  margin-right:0;
}
.counter li:before{
  content:counter(myCounter);
  counter-increment: myCounter;
  display:inline-block;
  width:20px;
  height:20px;
  color:#fff;
  text-align:center;
  line-height:20px;
  background-color:#ddd;
  border-radius:50%;
  margin-right:10px;
}
.counter li:hover,
.counter li.active{
  border-color:green;
}
.counter li:hover:before,
.counter li.active:before{
  background-color:green
}
<ol class="counter">
  <li>simple</li>
  <li>transparent</li>
  <li>collaborative</li>
</ol>

7
  • вот именно так хотел,но еще бы чтоб линия по ширине блока совпадала 12 фев 2018 в 10:53
  • Внес правки. Это имелось в виду?
    – zhurof
    12 фев 2018 в 11:25
  • да,а как называются подобные блоки? 12 фев 2018 в 11:34
  • если эти блоки переключают видимость какого-нибудь контента на странице, то это называется "табы".
    – zhurof
    12 фев 2018 в 11:56
  • ну вот видимо это при hover просто не знал как называется 12 фев 2018 в 12:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.