0

Как с помощью ::before сделать вот так чтобы текст вертикально был ровным по левой линии?

У меня получается вот так: А когда ставлю float, вторая строка текста уходит под квадратик. Нужно чтобы было как на первом изображении. На размер плюсов не обращайте внимания.

.plus_item li:before {
	content: '+';
	color: #fff;
	background: #445161;
	margin-right: 8px;
	display: block;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 32px;
}

1
  • 1
    Свой код приведите, пожалуйста.
    – Coder
    4 ноя 2019 в 14:37

2 ответа 2

2

Приблизительно так

* {
  box-sizing: border-box;
}

.list {
  padding-left: 0;
}

.list__item {
  padding-left: 50px;
  position: relative;
  margin-bottom: 15px;
  list-style: none;
}

.list__item::before {
  content: '+';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: #000;
  color: #fff;
  text-align: center;
}
<ul class="list">
  <li class="list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim cupiditate non velit quos obcaecati, perferendis. Voluptas adipisci fugiat, sed quam non modi harum praesentium, cupiditate culpa alias doloremque nobis officiis!</li>
  <li class="list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi maxime, doloremque. A esse aspernatur odio tempore, asperiores, nemo iste saepe corporis ea voluptatibus doloribus molestiae officiis quas, illo dignissimos deserunt.</li>
</ul>

1

есть миллион и один способ решения этой задачи, но первое, что пришло в голову

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

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
}

.block {
  position: relative;
  max-width: 400px;
}

.block__text {
  padding-left: 40px;
}

.block__text::before {
  content: "+";
  color: #fff;
  background: #445161;
  display: block;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  position: absolute;
  left: 0;
}
<div class="block">
  <div class="block__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus minus laborum velit quae perspiciatis maxime aliquam cupiditate quo, itaque quia!</div>
</div>

Ваш ответ

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

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