prevet line break going under ::before pseudo element

Question

p::before {
  content: "1. ";
}

p {
  width: 200px;
}

<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

How can I let the line breaks begin more on the right, so that the pseudo element doesnt have any text under it?

https://stackoverflow.com/a/33363184/8620333 – Temani Afif Oct 17 '21 at 13:13 — Temani Afif, Oct 17 '21 at 13:13

Paulie_D · Accepted Answer · 2021-10-17T13:15:13.443

Flexbox can fix that.

p::before {
  content: "1. ";
}

p {
  width: 200px;
  display: flex;
}

<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Alternatively, use CSS-Tables

p::before {
  content: "1. ";
  display: table-cell;
  padding:.25em;
}

p {
  width: 200px;
  display: table-row;
}

span {
  color: red
}

<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
  ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <span>INTERCEDING SPAN</span> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

This seems to work for normal texts, however with something linke `Lorem ipsum dolor sit amet` the text in the `span`-element are getting grouped — anonym, Oct 17 '21 at 12:59

score 0 · Answer 2 · answered Oct 17 '21 at 12:53

0

Set display: flex or display: inline-flex on your p element. However, I would suggest using standard ul li for such purpose instead of pseudo elements.

answered Oct 17 '21 at 12:53

callOfCode

893
8
11

prevet line break going under ::before pseudo element

2 Answers2