围绕自定义 li 项目符号创建 CSS 边框

Question

我试图弄清楚是否可以在我作为 li 的自定义项目符号导入的图像周围合并 css 边框：

ul {
  list-style: none;
  margin-right: 0;
  padding-left: 0;
  list-style-position: inside;
}

ul > li {
  align-content: center;
  display: flex;
  margin: 5px 0;
  padding-left: 1em;
  text-indent: -1em;
}

ul li:before {
  /* I'm a different image but found a similar 
   sized one online for demonstration 
   purposes seen below */
   
  content: url("https://www.dicentral.com/css/assets/imgs/Flag_Nation_france.png");
  border: 1px solid grey;
}

<ul>
   <li>Get to know the business</li>
   <li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
   <li>Learn how the team's priorities impact our mission</li>
   <li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>

嵌入式代码编辑器中的结果反映了我正在使用的图像的结果。

这是所需的输出：

有任何想法吗？我想不幸的是我可能必须导入带有边框的图标，但我正在看看我是否可以在没有边框的情况下进行管理。

谢谢！

Answer 1

是的，这很容易做到，请看下面的例子。你只是把事情搞砸了一点。

align-content相反，这会align-items导致线路定位不正确。text-indent结果导致不正确的偏移。我已经删除了这些小问题。

关于图像本身 - 由于表情符号，我使用了em作为示例，但对于图像，最好使用px并重新计算当前定义为 的值em。

ul {
    margin-right: 0;
    padding-left: 0;
    list-style: none;
}

ul > li {
    align-items: center;
    display: flex;
    margin: 5px 0;
}

ul li:before {
    /* I'm using the url method to fetch an icon, but 
     inserted a emoji for demonstration 
     purposes seen below */

    /*content: url("path/to/icon");*/
    content: '';
    border: 1px solid #808080;
    border-radius: 100%;
    width: 1em;
    height: 1em;
    display: inline-block;
    padding: 0.25em;
    line-height: 1.0;
    margin-right: 0.5em;
}

<ul>
    <li>Get to know the business</li>
    <li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
    <li>Learn how the team's priorities impact our mission</li>
    <li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>