::before div 上的样式宽度

Question

我需要一些帮助来设置我的标题样式。我在css counter-increment unwanted reset when skipping :before 有一个关于 css 计数器增量的问题，我让计数器工作，现在我的问题是样式，我希望它是这样的。

1.a 标题 1
10.a 标题 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>

Answer 1

h 元素是块级元素，因此它们覆盖 100% 宽度并清除两侧。

您需要将显示从block 更改为inline，然后它会对齐。

例子：

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>

所以这个先前的答案是一个对齐的文本示例：Align list items with custom CSS content before bullets

Answer 2

试试这样：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;
}

Answer 3

可以添加到 CSS 文件中的非常简单的小类：

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

它会按照您的意愿工作。