CODEWITHSUNDEEP
htmlcss
user1781367
user1781367

Reputation: 602

CSS Text indenting with custom bullet image

I know there is a way to keep indent for second line of text in list items. I'm trying to apply the similar effect for a text paragraph with custom list image.

HTML

<p>
    <a class="bullet">
        Lorem ipsum dolorsit & consectetur adipisicing
    </a>
</p>

CSS

.bullet:before {
    background-image:url("../bullet-image.png");
    display: inline-block;
    vertical-align: middle;
    background-position: 10px 5px;
    content:"";
}

Upvotes: 1

Views: 2328

Answers (3)

Haji
Haji

Reputation: 2077

Use indent with padding for your .bullet class

padding-left: 2em;
text-indent: -2em;

Upvotes: 1

web-tiki
web-tiki

Reputation: 103750

This does the trick :

FIDDLE CSS :

.bullet{
    position:relative;
     padding-left:20px;
    display:block;
}

.bullet:before {
    background-image:url("../bullet-image.png");
    background-position: 10px 5px;
    content:"";
    height:15px;
    width:15px;
    position:absolute;
    top:0;
    left:0;
}

Upvotes: 2

I don&#39;t use this profile anymo
I don&#39;t use this profile anymo

Reputation: 2676

Sounds like you're looking for list-style-position:

http://reference.sitepoint.com/css/list-style-position

To quote:

outside The value outside causes the list marker to be rendered outside the principal block box. Its precise location isn’t defined by the CSS2.1 specification. Contemporary browsers seem to render it approximately 1.5em to the left of the principal block box in a left-to-right environment, or 1.5em to the right of the principal block box in a right-to-left environment. Some browsers use padding on the list to make room for the marker box, while others use a margin.

inside The value inside makes the list marker the first inline box in the principal block box. Its exact location is not defined by the CSS2.1 specification. Note that when using the value inside should text wrap to another line then a situation could occur on short lines where the list marker becomes detached from the text (as of course would any other inline element).

Upvotes: 0

Related Questions