CODEWITHSUNDEEP
htmlcss
user1734974
user1734974

Reputation:

Insert text with css, indent rest of text like list

My question builds on this question. Just like abelenky, I want to insert text in front of an HTML element using CSS only. Marcel Jackwerth's answer worked perfectly, however, I need something additional. When the text is inserted, I want the element to be indented like in a list:

Imagine that instead of the bullet point, the text that has been inserted with CSS should be shown ("Joe's Task" for example). How can I accomplish such an effect?

Note: I tried using a list by removing the bullet point style and adding the text using :before as described here, however the text in the :before style just flows with the rest of the text.

Upvotes: 1

Views: 200

Answers (2)

Paulie_D
Paulie_D

Reputation: 115288

If you can wrap the pargraphs in a container then you can manage dynamic alignment using CSS Tables 

div {
  display: table border-collapse:separate;
  border-spacing: 1em;
}

p {
  display: table-row;
}

p::before {
  display: table-cell;
  padding-right: 1em;
}

.one:before {
  content: "Joe's\00A0task";
}

.two:before {
  content: "Michael's\00A0task";
}

.third:before {
  content: "Task";
}
<div>
  <p class="one">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p class="two">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p class="third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273512

You can use flex to achieve this then simply adjust margin and/or width of pseudo element as you want:

p {
  display: flex;
}

.one:before {
  content: "Joe's\00A0task";
  margin-right: 15px;
}
.two:before {
  content: "Michael's\00A0task";
  margin-right: 5px;
}
.third:before {
  content: "Task";
  width:180px;
}
<p class="one">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="two">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="third">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Upvotes: 0

Related Questions