style width on ::before div

Question

I need some help with styling my headers. I had a question about css counter-increment here css counter-increment unwanted reset when skipping :before and I got the counter to work, now my problem is the styling, I would like for it to be like this.

1.a Header 1
10.a Header 2

div.first:before
{
    width: auto;
    display: inline-block;
    content: '1.a.\00a0';
}
div.second:before
{
    width: auto;
    display: inline-block;
    content: '10.a.\00a0';
}

div.first {  
}
div.second {
}

h4.counter {
}

<div class="first">
    <h4 class="counter">foo</h4>
</div>

<div class="second">
    <h4 class="counter">foo</h4>
</div>

Hey @Sanna Widell, try out adding style to `h4` tag! – Vikrant Mar 09 '15 at 11:50 — Vikrant, Mar 09 '15 at 11:50

Stewartside · Accepted Answer · 2015-03-09T13:52:45.953

1

h elements are block level elements, therefore they cover 100% width and clear both sides.

You will need to change the display from block to inline and it will then line up.

Example:

div.first:before
{
    width: auto;
    display: inline-block;
    content: '1.a.\00a0';
}
div.second:before
{
    width: auto;
    display: inline-block;
    content: '10.a.\00a0';
}

div.first {  
}
div.second {
}

h4.counter {
    display:inline
}

<div class="first">
    <h4 class="counter">foo</h4>
</div>

<div class="second">
    <h4 class="counter">foo</h4>
</div>

So this previous answer for an example of text which is aligned:Align list items with custom CSS content before bullets

edited Mar 09 '15 at 13:52

answered Mar 09 '15 at 11:45

Stewartside

20,378
12
60
81

That works good! But when I have more than one line I would like to have indentation on the other lines (except the first). Would that be possible? So the text on the second line starts at the same point as the text on the first line. – Sanna Widell Mar 09 '15 at 12:44

score 0 · Answer 2 · answered Mar 09 '15 at 11:45

Try like this: DEMO

CSS:

div.first:before {
    display: inline-block;
    content:'1.a.\00a0';
}
div.second:before {
    display: inline-block;
    content:'10.a.\00a0';
}
div.first, div.second {
    display: block;
}
h4.counter {
    display: inline-block;
}

score 0 · Answer 3 · edited Sep 26 '19 at 07:21

0

Very simple and small class you can add to your CSS file:

h4.counter{
    margin : -1.5% 0 0 3%;
    /*below seems to be hard-codednot so useful still can checkout:*/
    /*margin: -20px 0 0 35px;*/
}

And it will work as you wanted it to be. enter image description here

edited Sep 26 '19 at 07:21

Glorfindel

21,988
13
81
109

answered Mar 09 '15 at 11:49

Vikrant

4,920
17
48
72

hey @Sanna Widell, Is this helpful solution? – Vikrant Mar 09 '15 at 11:57
Hello @Victor, I have tried that before, but I want the text in the header to float after the counter. – Sanna Widell Mar 09 '15 at 12:41
what is the Header, in above example? – Vikrant Mar 09 '15 at 12:46
In my example "foo" is the text, and i would like i to look something like @Stewartside posted, but with som modification. I would like the second row (if the text takes multiple rows) to have indentation so it starts at the same point at the first line does. – Sanna Widell Mar 09 '15 at 12:49
have you really checked my code? bcuz, it gives headers with exact same indentation together, even in multiline text – Vikrant Mar 09 '15 at 12:55
Yes, I know, but the first letter when its 1.a starts at the same point at the first letter if i have 10.a. And i would like to have the same amout of space between them. But thanks for the help! – Sanna Widell Mar 09 '15 at 13:00
the out put image i'hv added; is it matches to your requirement? – Vikrant Mar 09 '15 at 13:05
Added a new image of how i would like it to look :) – Sanna Widell Mar 09 '15 at 13:23
this is how it worked at ur side? unbelievable! k fine, m not able crack it :( – Vikrant Mar 09 '15 at 13:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72574/discussion-between-sanna-widell-and-victor). – Sanna Widell Mar 09 '15 at 13:28

style width on ::before div

3 Answers3