1

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:

  • 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.

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.

noClue
  • 958
  • 1
  • 13
  • 34
  • so to be clear, you want to replace the bullet with text ? and keep indentation ? – Temani Afif Jan 24 '18 at 11:50
  • https://stackoverflow.com/questions/7698764/custom-bullet-symbol-for-li-elements-in-ul-that-is-a-regular-character-and – Paulie_D Jan 24 '18 at 11:51
  • @TemaniAfif Yes, though it doesn't have to be a list. I would actually prefer if it wasn't a list, so I can just use a simple div or something. – noClue Jan 24 '18 at 11:57
  • @Paulie_D That... was fast. I'm still looking through it, but this seems to solve my issue (as well as the answer from Temani Afif, since I'd prefer not to use lists). Thanks! – noClue Jan 24 '18 at 11:58
  • Added answer that doesn't use lists and has dynamic alignment. – Paulie_D Jan 24 '18 at 12:13

2 Answers2

1

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • This would be great if the text would line up, no matter what text you insert with CSS. Any way to just set a fixed width for the CSS text? Other than that, it's a pretty good solution and would already help me a lot. – noClue Jan 24 '18 at 12:01
  • @noClue yes, you can set a fixed width to before element if needed ;) – Temani Afif Jan 24 '18 at 12:02
  • Yep, I just tried it out myself. Perfect! Thank you so much! You solved a major headache of mine. -.- – noClue Jan 24 '18 at 12:05
1

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • That's an even better solution considering I don't have to set a width for the :before text. Now I feel bad for taking the coveted green tick away from Temani Afif. :( – noClue Jan 24 '18 at 12:14