Question

标题有点误导，但我不知道如何用一句话来描述我的问题。

我正在为一家老公司进行网页设计，该公司有一个微妙的时间栏作为其企业形象的一部分。

员工拥有自己的个人资料页面，我希望他们的工作经历看起来像时间栏。

也许你知道如何管理它。

除了第一行需要更长和更暗的笔划外，每条线都需要有一个轻微的笔划。我也希望它能够做出回应。对于我正在改变线高的情况，解决方案仍然需要工作。

感谢您的想法！

示例图片： http://www.yoops.de/di-JEYS.jpg

Answer 1

尝试以下内容并根据需要调整属性。

ul li:first-of-type { /* Refers to the 1st Li of the UL's */
  font-weight: bold;
  font-size: 20px;
}
li {
  display: block;
  height: 20px;
  line-height: 20px;
  position: relative;
  padding-left: 5px;
}
li:after {
  position: absolute;
  content: '-';
  left: -10px;
  color: gray;
  font-size: 18px;
}
ul li:first-of-type:after {
  font-weight: bold;
  font-size: 36px;
  top: -4px;
  color: black;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li>John Johnson</li>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ul>
  <li>Mike Michael</li>
  <li>Chelsea</li>
  <li>Barcelona</li>
  <li>Real Madrid</li>
</ul>

如何将list-style与background-image联系起来？

1 个答案: