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

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;
}

它应该看起来像这样：

长文本在这里 长文本在这里 长文本在这里 长

• 文本在这里 长文本是这里长文本在这里 长文本在这里 长文本在这里 长文本在这里 长文本是这里长文本在这里 长文本在这里 长文本在这里 这个长文本 Schould be进口：全部在一行 中我只需要一个列用于 Before 标签，它不应该包装文本节点在强节点之前和之后，我需要 2 列布局一个 col 用于在 CSS attr 之前，其余文本的一个 col 忽略了强者

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

Answer 1

由于我没有及时得到有价值的答案，我现在将自己回答，我通过一些实验找到了解决方案，因为我不熟悉这种情况，所以我只花了几个小时。

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