css - 如何像 ul 中的 li 一样在属性之前使用 css 作为自己的列

Question

你好，我搜索了几个小时，我不知道我可能遗漏了什么，但我无法理解我需要 2 个列，一个是通过 css 插入的内容生成的，另一个应该是正常的内容文本，但我根本不明白。

我想创建一个自定义列表，所以我需要

<ul><li></li></ul> 

    <div class="flex-container">
    Long Text is Here Long Text is Here Long Text is Here Long Text is 
Here Long Text is Here Long Text is Here Long Text is Here Long Text is 
Here Long Text is Here Long Text is Here This long Text Schould be 
<strong class="no-wrap">Importent: </strong> 
<strong class="no-wrap"> All in One single line &nbsp; </strong> 
i only need one colum for the before tag it should not wrap the text nodes 
before and after the strong nodes i need a 2 colum layout one col for the 
before css attr and one col for the rest of the text ignoring the strong

    </div>

@import "compass/css3";
.flex-container:before { 
counter-increment: h22; 
content: counter(h22) ". "; 
min-width: 0.8cm;    
}

.flex-container{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.no-wrap{
  flex-shrink: 0;
}

它应该是这样的:

• 此处为长文本 此处为长文本 此处为长文本 此处为长文本这里是长文这里是长文这里是长文这里是长文此处为长文 此处为长文 此处为长文 应为重要:全部在一行中我只需要一个 colum 作为 before 标签，它不应该包装文本节点在强节点之前和之后我需要一个 2 colum 布局，一个 col 用于在 css attr 和其余文本的一个 col 之前忽略强

https://codepen.io/frank-dspeed/pen/KJMRwG

Answer 1

由于我没有及时得到有值(value)的答案，我现在会自己回答我发现一些实验的解决方案只花了我几个小时，因为我不熟悉这种情况。

body { counter-reset: h21 h22 h23; }
.flex-container:before { 
    counter-increment: h22; 
    content: counter(h22) ". "; 
    min-width: 0.8cm;
    margin-left: -0.8cm;
    position: absolute;
  }
.flex-container { 
    position: relative;
    padding-left: 0.8cm;
    font-size: 11pt; 
    font-weight: normal; 
    margin: 0px;
    padding-bottom: 11pt;     
  /*disabled by me because if we choose flex this can't render right as it treats tags as cols*/
}

https://codepen.io/frank-dspeed/pen/xMOagZ