Question

我有定义表的html代码，如下所示：

<table>
  <th>
     <td style="width:200px">
        col1
     </td>
  </th>
  <tr>
     <td id="a1">
        text1
     </td>
  </tr>
</table>

我喜欢在“ text1”的右侧绘制一个矩形，即在单元格＃a1中绘制一个矩形，其自定义宽度（例如40像素）和相对于单元格左侧的固定偏移量（例如100像素）仅使用CSS，这样看起来像这样：

text1  XXXX

（XXXX是实心矩形）

我无法控制html，即无法更改它，因此请不要提出该建议。也没有JS。

重要的是，css不能改变文本的外观和位置。

CSS是否可以使用？

Answer 1

使用背景

#a1 {
  background: 
   linear-gradient(red, red) 
   left 100px top 50% 
   /
   40px 10px  /*width height (use 100% instead of 10px for full height)*/
   no-repeat;
}

<table>
  <tr>
    <th style="width:200px">
      col1
    </th>
  </tr>
  <tr>
    <td id="a1">
      text1
    </td>
  </tr>
</table>

Answer 2

使用::after伪元素。添加outline以显示100px偏移；显然，这不是必需的。

#a1 {
  outline: red 1px solid
}

#a1::after {
  content: '\a0';
  display: inline-block;
  width: 40px;
  background: #000;
  transform: translateX(50px)
}

<table>
  <tr>
    <th style="width:200px">
      col1
    </th>
  </tr>
  <tr>
    <td id="a1">
      text1
    </td>
  </tr>
</table>

仅使用CSS将填充的矩形添加到表格单元格中的文本

2 个答案: