How can I align my paragraphs in CSS/bootstrap properly?

Question

I have a couple paragraphs on my webpage and each of them starts with a dash:

<p>- some longer text is here (...) some longer text is here </p>
<p>- some longer text is here (...) some longer text is here </p>
etc.

It's visible on my page as:

- some longer text is here some longer text is here
some longer text is here some longer text is here s
ome longer text is here some longer text is here so
- some longer text is here some longer text is here
some longer text is here some longer text is here s
ome longer text is here some longer text is here so

Instead, I want the dashes to be more visible, so the final effect would be:

- some longer text is here some longer text is here
  some longer text is here some longer text is here s
  ome longer text is here some longer text is here so
- some longer text is here some longer text is here
  some longer text is here some longer text is here s
  ome longer text is here some longer text is here so

How can I achieve it in CSS/bootstrap? Here is my very basic fiddle: http://jsfiddle.net/azxpckg5/3/ thanks!

score 4 · Accepted Answer · answered Nov 06 '15 at 17:34

You could use a ::before pseudo element. Check out this fiddle.

p {
    padding-left: 10px;
}

p::before {
    position: absolute;
    left: 0;
    content:'-';
}

<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>

m0bi5 · Answer 2 · 2015-11-07T03:23:00.687

If you dont want to use the content property of css here is an alternative:

HTML:

<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here</p>
<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>
<div class="id">-</div><p>some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here some longer text is here </p>

CSS:

.id
{
    display:inline-block;
}
p
{
    margin-top:-17px;
    padding-left:10px;
}

You should *not* reuse `id` selectors. See [here](http://www.w3schools.com/css/css_selectors.asp) & [here](http://stackoverflow.com/questions/544010/css-div-id-vs-div-class). — justinw, Nov 06 '15 at 18:27
@Quoid even I am self taught, thanks for pointing it out. Made the required changes :) — m0bi5, Nov 07 '15 at 03:23

How can I align my paragraphs in CSS/bootstrap properly?

2 Answers2