Reputation: 10264
I have a problem with text-indent.
Here is the image what I want to make.
I don't want to use <li>
.
I want to make custom list style.
Here is my code.
.dotted-style{
width: 200px;
word-break: break-all;
}
.dotted-style::before{
display: inline-block;
content: '';
width: 4px;
height: 4px;
background-color: gray;
border-radius: 100%;
margin: auto 5px;
vertical-align: middle;
}
<p class="dotted-style">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus aliquam non aspernatur reprehenderit, velit, laboriosam harum aut dolorum, quasi a iure maiores. Eos laboriosam exercitationem quasi magni doloribus fuga rerum?
</p>
Upvotes: 0
Views: 68
Reputation: 18099
Try this with margin:
CSS:
.dotted-style {
width: 200px;
word-break: break-all;
margin-left: 15px;/*added*/
}
.dotted-style::before {
display: inline-block;
content: '';
width: 4px;
height: 4px;
background-color: gray;
border-radius: 100%;
margin: auto 5px auto -10px;/*modified*/
vertical-align: middle;
}
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2189/
Upvotes: 3
Reputation: 3795
Try this:
.dotted-style{
width: 200px;
word-break: break-all;
position:relative;
padding-left:15px;
}
.dotted-style::before{
display: inline-block;
content: '';
width: 4px;
height: 4px;
background-color: gray;
border-radius: 100%;
margin: auto 5px;
vertical-align: middle;
position:absolute;
left:0;
top:10px;
}
Upvotes: 2