CSS Before Selector and Margin issues - css

Question

I'm trying to use the before selector to mimic some behavior of a list item when applied to elements. I can't use list items so I have to be able to get styles to work.
Here is a fiddle showing the issue: http://jsfiddle.net/7g6ncg7u/
.container {
width:300px;
}
.up:before{
content:'\25B2';
color:green;
padding-right:10px;
margin:1px;
}
.down:before{
content:'\25BC';
color:red;
padding-right:10px;
margin:1px;
}
What I want to have happen is the 2nd line of the 2nd span to align with the text above it, not the start of the line like its presently doing.

Answer 1

You can use float like this:
.down {
clear:both;
}
.down:before{
content:'\25BC';
float:left; /**ADD THIS**/
color:red;
padding-right:10px;
margin:1px;
}
Check the Snippet Below
.container {
width: 300px;
}
.down {
clear: both;
}
.up:before {
content: '\25B2';
color: green;
padding-right: 10px;
margin: 1px;
}
.down:before {
content: '\25BC';
float: left;
color: red;
padding-right: 10px;
margin: 1px;
}
<div class="container">
<span class="down" style="display: block;">regular bullet point text</span>
<span class="down" style="display: block;">regular bullet point text but this one is longer and will wrap</span>
</div>

Answer 2

Try wrapping the content of the bullet in a tag, such as a p tag. This will separate the bullet from the text and allow you to handle them separately. From there you can change the span to display: table; and the p to display:table-cell;.
Example fiddle: http://jsfiddle.net/7g6ncg7u/5/

Answer 3

Here's what I used, and it seems to work pretty well.
HTML:
<div class="container">
<div class="down" style="display: block;">
regular bullet point text
</div>
<div class="down" style="display: block;">
regular bullet point text but this one is longer and will wrap
</div>
</div>
CSS:
.container{
width:300px;
}
.down
.up:before{
content:'\25B2';
color:green;
padding-right:10px;
margin:1px;
}
.down:before{
content:'\25BC';
color:red;
padding-right:10px;
margin:1px;
}
div {
padding-left: 1.5em;
text-indent:-2.0em;
}