代码之家 › 专栏 › 技术社区 › YoavKlein

文本装饰跨越<span>s

css html

YoavKlein · 技术社区 · 1 年前

我有一个 <ul> 元素,列表项如下:

<ul>
    <li class="list__item">
        <span class="list__quantity">3</span>
        <span class="list__unit">Kg</span>
        <span class="list__name">Tomatos</span>
     </li>
     <li class="list__item">
        <span class="list__quantity">3</span>
        <span class="list__unit">Kg</span>
        <span class="list__name">Cucmbers</span>
      </li>
</ul>

我想要一个 text-decoration: line-through 它跨越了整个列表项。我试过:


.list__item {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
    text-decoration: line-through;
}

但我的清单看起来像这样:

我希望这条线是连续的,跨越整个列表项。

有可能吗?

3 回复 | 直到 1 年前

vivek 1 年前

不要使用 line-through ,使用位于上方的伪元素 span s

.list__item {
  display: flex;
  margin-bottom: 10px;
  /*     text-decoration: line-through; */
  position: relative;
  width: min-content;
}

.list__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: red;
}

span {
  padding: 0 0.25em;
}

<ul>
  <li class="list__item">
    <span class="list__quantity">3</span>
    <span class="list__unit">Kg</span>
    <span class="list__name">Tomatos</span>
  </li>
  <li class="list__item">
    <span class="list__quantity">3</span>
    <span class="list__unit">Kg</span>
    <span class="list__name">Cucmbers</span>
  </li>
</ul>

已删除图像

-1

Aniket Pandey 1 年前

你可以使用 ::before 伪元素。唯一的缺点是,你必须将li元素的宽度限制为 max-content 或者您可以手动设置线条的宽度值。

或者,您可以在跨度本身上使用psuedo元素。这将需要一些尝试,才能根据整个列表数据获得确切的宽度和位置。第一种方法有点简单和简约,但如果你需要的话,你可以选择第二种方法 li 成为 width:100%

.list__item {
  position: relative;
  display: flex;
  margin-bottom: 10px;
  width: max-content;
}

.list__item::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: black;
}

<ul>
  <li class="list__item">
    <span class="list__quantity">3</span>
    <span class="list__unit">Kg</span>
    <span class="list__name">Tomatos</span>
  </li>
  <li class="list__item">
    <span class="list__quantity">3</span>
    <span class="list__unit">Kg</span>
    <span class="list__name">Cucmbers</span>
  </li>
</ul>

-2

vivek 1 年前

你可以试试下面。这将在span的右侧添加空格,但最后一个span除外。请注意,您必须从跨度中删除现有的填充/边距。

screenshot

<html>

<head>
    <style>
        .list__item {
            display: flex;
            margin-bottom: 10px;
            width: 100%;
            text-decoration: line-through;
        }

        .list__item span:not(:last-child):after {
            content: "\00a0\00a0";
            /* this adds 8px space on right side. add more \00a0 if required*/
        }
    </style>
</head>

<body>
    <ul>
        <li class="list__item">
            <span class="list__quantity">3</span>
            <span class="list__unit">Kg</span>
            <span class="list__name">Tomatos</span>
        </li>
        <li class="list__item">
            <span class="list__quantity">3</span>
            <span class="list__unit">Kg</span>
            <span class="list__name">Cucmbers</span>
        </li>
    </ul>
</body>

</html>