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!

Answer 1

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> 

Answer 2

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;
}