html - 围绕自定义 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>

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

这是期望的输出:

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

谢谢!

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>